vue.js 过渡

作者: 恰皮 | 来源:发表于2016-10-09 15:35 被阅读0次

    使用CSS过渡

    • 首先在你的标签中加入transition="fade"(fade是你自己起的名字,一个过渡效果的样式名)
    <div id="four">
        <div v-if="show" transition="fade"></div>
        <button v-on:click="change">show</button>
    </div>
    
    • 写CSS样式
    .fade-transition {
        transition: all 1s ease;
        opacity: 1;
        width: 150px;
        height: 150px;
        background-color: red;
    }
    .fade-enter,.fade-leave {
        opacity: 0;
    }
    

    .fade-transition 始终保留在元素上。
    .fade-enter 定义进入过渡的开始状态。只应用一帧然后立即删除。
    .fade-leave 定义离开过渡的结束状态。在离开过渡开始时生效,在它结束后删除。

    • vue.js代码:
    <script>
        var vm3 = new Vue ({
            el:"#four",
            data: {
                show: false,
            },
            methods:{
                change: function(event) {
                    this.show=true
                }
            }
        })
    

    change方法实现点击按钮时改变div的v-show的值,从false变为true,从隐藏到显示,在显示的过程中使用fade过渡效果。

    • 效果
    Paste_Image.png

    点击:

    Paste_Image.png

    div元素淡入。

    动态绑定过渡效果:

    • HTML代码:
    <div id="four">
        <div v-if="show" :transition="transitionName"></div>//注意transition前面有冒号,“transitionName”是vue实例中的一个属性名,它的属性值就是你的过渡效果样式名
        <button v-on:click="change">show</button>
    </div>
    
    • CSS样式:
    .fade-transition {
        transition: all 1s ease;
        opacity: 1;
        width: 150px;
        height: 150px;
        background-color: red;
    }
    .fade-enter {
        opacity: 0;
    }
    
    • vue.js代码:
    <script>
        var vm3 = new Vue ({
            el:"#four",
            data: {
                show: false,
                transitionName:'fade'//这里就是设置元素标签中的transitionName的值
            },
            methods:{
                change: function(event) {
                    this.show=true
                }
            }
        })
    </script>
    

    注意:transition是'xxx',css样式就是xxx-transition,xxx-enter,xxx-leave,名字要对应。

    javascript钩子

    可以在实现过渡的过程使用JavaScript钩子执行一些东西:
    eg:

    <div id="four">
        <div v-if="show" :transition="transitionName"></div>
        <button v-on:click="change">show</button>
    </div>
    
    <script>
        var vm3 = new Vue ({
            el:"#four",
            data: {
                show: false,
                transitionName:'fade'
            },
            transitions:{
                fade:{
                    beforeEnter:function(el){
                        el.textContent='beforeEnter'
                    },
                    enter:function(el){
                        el.textContent='enter'
                    },
                    afterEnter:function(el){
                        el.textContent='afterEnter'
                    }
                }
            },
            methods:{
                change: function(event) {
                    this.show=true
                }
            }
        })
    </script>
    

    效果:


    Paste_Image.png Paste_Image.png Paste_Image.png

    可以看到在不同时期,执行了对应的JavaScript钩子。

    相关文章

      网友评论

        本文标题:vue.js 过渡

        本文链接:https://www.haomeiwen.com/subject/sgnpyttx.html