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。

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条回复

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代,企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

查看课程