<view class="red" hidden="{{!hiddenStatus}}"></view>
<view class="blue" hidden="{{hiddenStatus}}">
</view>
|
page {
width: 100%;
height: 100%;
}
.red {
width: 100%;
height: 100%;
background-color: red;
}
@keyframes mymove
{
from {opacity:1;}
to {opacity:0.1;}
}
.blue {
width: 100%;
height: 100%;
background-color: blue;
animation: mymove 5s;
animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation-fill-mode: forwards;
}
|
Page({
data: {
hiddenStatus: false
},
onLoad: function (options) {
},
onReady: function () {
},
onShow: function () {
var _this = this
setTimeout(function () {
_this.setData({
hiddenStatus: true
})
}, 5000)
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
},
onReachBottom: function () {
},
onShareAppMessage: function () {
}
})
|
如果直接进入这个页面，动画在安卓和ios上都可以正常运行； 如果是从其他页面跳到该页面，安卓动画可以正常执行，ios 直接显示动画执行完毕的状态。
实验下来确实有这个问题，IOS 在页面除开时 60ms 以内所有动画无效。
所以想到的方案就是延后 60ms 以上 (推荐100ms) 再放动画。
在 iPhone X 微信6.6.1版本，会执行动画但并没有透明度的渐变，且一开始就是是动画的 forwards 状态，五秒后动画结束， blue hidden， red show。 其他都没问题，只是丢失了这个透明度渐变的过程。
个人意见，就是 setData 一次 true，setData 一次 false，这是没有办法的办法
在 iPhone X 微信6.6.1版本，会执行动画但并没有透明度的渐变，且一直是动画的 forwards 状态。
@永恒君 ，您说的 setData 两次是什么意思呢？
感觉常规的重置 animation 都不适用，恐怕只能 setData 两次了