Vue之過渡與動畫

時間 2019-11-08

標籤 vue 過渡動畫简体版

原文原文鏈接

Vue之過渡與動畫

進入&離開單元素過渡

Vue在跟新、插入或移除DOM時，提供多種不一樣的過渡效果，

1.在css過渡和動畫中自動應用class，

2.能夠配合第三方的動畫庫，好比animate.css

3.在過渡鉤子函數中使用Javascript直接操做DOM,

4.能夠配合第三方的Javascript庫，好比velocity.js

過渡效果

1.單元素/組件過渡

1.css過渡

        /* fade對應html元素transition的name值，其餘都是固定的。 */
        .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
        }
        .fade-enter, .fade-leave-active {
        opacity: 0
        }

<div id="box">
        <button @click="handleClick">點擊隱藏p標籤</button>
        <!-- 過渡效果transition -->
        <transition name="fade">
            <p v-show="isShow">111111111</p>
        </transition>
</div>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

2.css動畫

        /* css動畫效果animate,確保html元素transition的name和類開始名字一致bounce */
        .bounce-enter-active{animation: bounce-in .5s;}
        .bounce-leave-active{animation: bounce-in .5s reverse;}
        @keyframes bounce-in {
            0%{transform: translateX(100px);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }

　　　　　　<button @click="handleClick">點擊隱藏p標籤</button>

        <!-- css動畫效果animate -->
        <transition name="bounce">
            <p v-show="isShow">222222222</p>
        </transition>

    var vm = new Vue({
        el:'#box', data:{ isShow:true, }, methods: { handleClick(){ this.isShow = !this.isShow; }, }, })

3.結合animate.css動畫庫

　　　　引入 <link rel="stylesheet" href="../css/animate.css">

　　　　　　<button @click="handleClick">點擊隱藏p標籤</button>

        <!-- css動畫庫引用的實現，首先須要引用animate.css的動畫庫，animated的後面就是動畫的名稱,能夠去github上搜索animate.css查找動畫的名字，進行隨意的組合 -->
        <transition name=""
        enter-active-class="animated flipInX"
        leave-active-class="animated fadeOutUp">
            <p v-show="isShow">3333333333</p>
        </transition>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

2.初始渲染過渡

//appear appear-active-class

        /* css動畫效果animate,確保html元素transition的name和類開始名字一致bounce */
        .bounce-enter-active{animation: bounce-in .5s;}
        .bounce-leave-active{animation: bounce-in .5s reverse;}
        @keyframes bounce-in {
            0%{transform: translateX(100px);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }

　　　　　　<button @click="handleClick">點擊隱藏p標籤</button>

        <!-- 一開始就呈現動畫 -->
        <transition name="bounce" appear appear-active-class="bounce-enter-active">
            <p v-show="isShow">4444444444</p>
        </transition>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

3.多個過渡元素(設置key)

當有多個相同標籤名的元素切換時，須要經過key特性設置惟一的值來標記進行各個元素的切換

mode:in-out;out-in

        /* css動畫效果animate,確保html元素transition的name和類開始名字一致bounce */
        .bounce-enter-active{animation: bounce-in .5s;}
        .bounce-leave-active{animation: bounce-in .5s reverse;}
        @keyframes bounce-in {
            0%{transform: translateX(100px);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }

        <button @click="handleClick">點擊隱藏p標籤</button>
        <!-- 多個元素過渡，當有多個相同標籤名的元素切換時，須要經過key特性設置惟一的值來標記進行各個元素的切換，若是一個是p元素一個是div元素，那就不要緊。動畫效果也能夠控制，添加mode屬性in-out表示先來再走，意思是第二個元素實現以後在讓第一個動畫呈現，也有out-in效果，先走再來，mode只支持這兩種模式 -->
        <transition name="bounce" mode="out-in">
            <p v-if="isShow" key="1">v-if顯示</p>
            <p v-else key="2">v-else顯示</p>
        </transition>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

4.多個組件過渡

　　　　能夠參看上一篇文章最後一個例子

5.列表過渡（設置key）

transition-group不一樣與transition,它會以一個真實的元素呈現，默認爲一個span，你也能夠經過tag屬性來更改成其餘元素

提供惟一的key屬性

        /* css動畫效果animate,確保html元素transition的name和類開始名字一致bounce */
        .bounce-enter-active{animation: bounce-in .5s;}
        .bounce-leave-active{animation: bounce-in .5s reverse;}
        @keyframes bounce-in {
            0%{transform: translateX(100px);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }

        <!-- 多個列表過渡,使用transition-group，並對li設置key值，通常最好用data.id來設置，若是用index代替，index會有一個問題，添加的時候沒問題，由於多了最後一個元素，這個沒問題，刪除的時候，刪除的元素沒問題，可是動畫只會使用到最後一個元素，用data沒問題，若是之後要刪除元素，修改元素，或者修改位置這種，必定要設置成非index索引值，才能正常識別 -->
        <input type="text" v-model="myText">
        <button @click="addLi">add</button>
            <transition-group tag="ul" name="bounce" >
                <!-- index表示索引值 -->
                <li v-for="(data,index) in dataList" :key="data">{{data}}<button @click="delLi(index)">delete</button></li>
            </transition-group>

    var vm = new Vue({
        el:'#box',
        data:{
            myText:'',
            dataList:[],
        },
        methods: {
            addLi(){
                this.dataList.push(this.myText);
            },
            delLi(index){
                this.dataList.splice(index,1);
            },
        },
    })

6.可複用過渡

        /* 可複用過渡 */
        .slideIn{height: 100%;position: fixed;width: 50%;background: #333;}
        .sliIn-enter-active{animation: sliIn-in .5s;}
        .sliIn-leave-active{animation: sliIn-in .5s reverse;}
        @keyframes sliIn-in {
            0%{transform: translateX(-100%);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }

         <button @click="handleClick">點擊隱藏p標籤</button>
       <!-- 可複用過渡,能夠將這個組件進行屢次的引用， -->
            <rezujian>
                <transition name="sliIn">
                    <div class="slideIn" v-if="isShow"></div>
                </transition>
            </rezujian>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
        components:{
            rezujian:{
                template:`<slot></slot>`,
            }
        }
    })

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。