vue transitionにおけるVelocityのパラメータの観点
Vue transition遷移アニメーションフック関数を使用
フック関数フック関数をtransitionラベルにバインドする Vueインスタンスにおけるmethodsフック関数を定義する方法 ここでピットを踏んだafter-enter関数はずっとトリガーされず、長い時間をかけて解決された.ここではVueの公式推薦プラグインVelocityを使った.jsこの問題についてお話ししましょう
問題のあるコード
上のコードのアニメーション効果は問題ありませんが、after-enterメソッドは後でデバッグしてから発見されません.
に改心
または
after-enterメソッドがトリガーされ、公式に与えられた例を比較します.
ぶんせき
の みをしてみると、4つのパラメータを すと、 のafter-enterメソッドはトリガーされないので、 にはVue translitionではVelocity(...args)は3つのパラメータしか えられないと います.Velocity()を したArgumentsのパラメータ(https://www.cnblogs.com/guand...)
Vueのフック でVelocity()の のパラメータはelで、2 はアニメーション の で、3 のパラメータはアニメーション の で、Velocityの い は のとおりです.
obj 1,obj 2の は のパラメータを てください
end
フック関数
問題のあるコード
enter(el, done){
Velocity(el, { translateX: '150px',translateY : '450px' }, { duration: 1000 })
Velocity(el,{opacity: 1},{ duration: 1000 }, { complete: done })
// setTimeout(() => {
// el.offsetWidth
// el.style.transform = "translate(150px,450px)";
// el.style.transition = "all 2s easy";
// done()
// }, 20)
},上のコードのアニメーション効果は問題ありませんが、after-enterメソッドは後でデバッグしてから発見されません.
Velocity(el,{opacity: 1},{ duration: 1000 }, { complete: done })に改心
Velocity(el,{opacity: 1}， { complete: done })または
elocity(el,{opacity: 1},{ duration: 1000 , complete: done })after-enterメソッドがトリガーされ、公式に与えられた例を比較します.
Demo
new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
}) ぶんせき
の みをしてみると、4つのパラメータを すと、 のafter-enterメソッドはトリガーされないので、 にはVue translitionではVelocity(...args)は3つのパラメータしか えられないと います.Velocity()を したArgumentsのパラメータ(https://www.cnblogs.com/guand...)
{
width: "500px", // "500px"
property2: value2 //
}, {
/* Velocity */
duration: 400, //
easing: "swing", //
queue: "", //
begin: undefined, //
progress: undefined, // （ ）
complete: undefined, //
display: undefined, // css display
visibility: undefined, // css visibility
loop: false, //
delay: false, //
mobileHA: true // （ ）
}Vueのフック でVelocity()の のパラメータはelで、2 はアニメーション の で、3 のパラメータはアニメーション の で、Velocityの い は のとおりです.
Velocity(el,obj1,obj2)obj 1,obj 2の は のパラメータを てください
end