2回答

Dell

2018-10-26

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

1

4

hustnzj

回复

慕前端6263329

感觉你这就是在重置动画的初始状态。

2020-02-22

共4条回复

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>

0

0