使用JavaScript在瀏覽器中動態生成CSS關鍵幀動畫。
enter(el, done) { // 設置動畫幀數
let animation = {
0: { transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})` },
60: { transform: 'translate3d(0, 0, 0) scale(1.2)' },
100: { transform: 'translate3d(0, 0, 0) scale(1)' }
} // 注冊動畫
animations.registerAnimation({
name: 'move', // 插入自定義的動畫
animation, // 參數配置
presets: {
duration: 1000, // 持續時間
easing: 'linear', // 過度效果
delay: 500 // 延遲時間
terations: 1, // 實現動畫的次數
delay: 0, // 延遲
direction: ‘normal‘, // 方向
resetWhenDone: false, // if true ：將最后動畫狀態應用為“變換”屬性
clearTransformsBeforeStart: false // 是否在動畫開始之前清除現有的轉換
} })
animations.runAnimation(el, 'move', function () {
// callback gets called when its done
})
},
afterEnter() { // 取消動畫
animations.unregisterAnimation('move') this.$refs.cdWrapper.style.animation = ''
}