3回答

慕先生3442787

2018-11-26

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

1

0

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

慕数据3159070

2018-10-23

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

0

1

qq_风之舞_ixKN67

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

2018-10-23

共1条回复