|
小米手机是不是不支持动画？ 这是官方的demo，在电脑上动画生效，手机上不生效 <template>
<div class="page-wrapper">
<input type="button" class="button" onclick="onCallAnimationClick" value="Animation 动画" />
<text id="animation">{{ mTextState }}</text>
</div></template><script>let $animation = nullexport default { private: { mTextState: 'Init'
},
onCallAnimationClick() { const keyframes = [
{ transform: { translateX: 0, translateY: 0
}, time: 0
},
{ transform: { translateX: '100px', translateY: '100px'
}, time: 100
}
] const options = { duration: 1000, easing: 'linear', delay: 0, fill: 'none', iterations: 5
} const cAnimationNode = this.$element('animation')
$animation = cAnimationNode.animate(keyframes, options) // 将会延迟至 (delay + startTime) ms 后执行动画；
$animation.startTime = 1000
$animation.play() this.mTextState = $animation.playState
$animation.oncancel = () => { this.mTextState = $animation.playState
}
$animation.onfinish = () => { this.mTextState = $animation.playState
}
}
}</script><style>.page-wrapper { flex-direction: column; justify-content: center; align-items: center;
}.button { color: #20a0ff; background-color: #ffffff; padding: 10px 20px; border: 1px solid #20a0ff; border-radius: 40px;
}</style> | 
