vue.js 过渡

使用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钩子。