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

Question

补充代码如下：

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

Answer 1

慕先生3442787 2018-11-26 16:24:16

把‘v-show’改成‘v-if’，或者写一个leave把opacity设为0。如果控制显示隐藏的方法是“v-show”，‘v-show’隐藏的原理是将样式diaplay设置为none，此时元素的opacity还是1。

Answer 2

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

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

Answer 3

慕数据3159070 2018-10-23 14:25:05

这里看不出来撒，全部代码有吗？

• 提问者 qq_风之舞_ixKN67 #1

  回复里有字数限制，我把代码贴到答案那了， 麻烦了哈。