Velocity改变元素的样式,第一次触发成功,第二次后就不执行了
来源:5-4 Vue中的 Js 动画与 Velocity.js 的结合
qq_风之舞_ixKN67
2018-10-23
补充代码如下:
<transition @before-enter = " handelBeforEnter"
@enter = "handelEnter"
@after-enter = "handleAfterEnter"
>
<!-- @before-leave @leave @after-leave -->
<div v-show="show">hello World</div>
</transition>
<button @click="handleClick">切换</button>
3回答
-
慕先生3442787
2018-11-26
把‘v-show’改成‘v-if’,或者写一个leave把opacity设为0。如果控制显示隐藏的方法是“v-show”,‘v-show’隐藏的原理是将样式diaplay设置为none,此时元素的opacity还是1。
10 -
qq_风之舞_ixKN67
提问者
2018-10-23
<div id="root">
<transition @before-enter = " handelBeforEnter"
@enter = "handelEnter"
@after-enter = "handleAfterEnter"
>
<!-- @before-leave @leave @after-leave -->
<div v-show="show">hello World</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="velocity.js"></script>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show;
},
handelBeforEnter:function(el){
// el值动画包裹的div标签
el.style.opacity = 0;
console.log("beforeEnter");
},
handelEnter:function(el,done){
Velocity(el,{
opacity:1
},{
duration:1000,
complete:done
});
console.log("Enter");
},
handleAfterEnter:function(el){
alert("动画结束");
console.log("afterEnter");
}
}
});
</script>
00 -
慕数据3159070
2018-10-23
这里看不出来撒,全部代码有吗?
012018-10-23
相似问题