Velocity改变元素的样式，第一次触发成功，第二次后就不执行了

Answer 1

Dell 2018-10-26 00:48:40

第二次执行的时候，开始你要重置动画的初始状态

• 老古月 #1

  我用的方式是把v-show换成v-if解决的  想和您一样但是一直都没解决了  可以稍微再解释一下吗   感谢老师了

• Dell 回复 老古月 #2

  这个和dom是否存在有关系，建议自己好好琢磨一下整体的执行流程，不太好讲

• 慕前端6263329 回复 Dell #3

  这里怎么重置？不太理解。自己探索后，感觉问题出在Velocity， 只需要把handleBeforeEnter: function(el) {el.style.opacity = 0;},改为handleBeforeEnter: function(el) {Velocity(el, {opacity: 0}, {duration: 0});}，则可实现

点开查看后面1条评论

Answer 2

提问者 qq_风之舞_ixKN67 2018-10-23 14:14:45

补充代码如下：

<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>