Javascript - Vue - 動畫

時間 2019-11-18

標籤 javascript vue 動畫欄目 JavaScript 简体版

原文原文鏈接

動畫狀態類名

vue動畫經過將須要執行動畫的標籤放入transition標籤中，再經過設置預置的vue動畫類名的css樣式來控制動畫的呈現效果。javascript

開場動畫狀態的三個類名css

v-enter:動畫開始以前的狀態html

v-enter-active:動畫過渡期間的狀態vue

v-enter-to:動畫結束後的狀態java

離場動畫狀態的三個類名app

v-leave:動畫開始以前的狀態ide

v-leave-active:動畫過渡期間的狀態函數

v-leave-to:動畫結束後的狀態post

css屬性transition能夠控制元素執行動畫過渡，該屬性須要設置元素的起始樣式和結束樣式，起始樣式寫在css樣式表裏，而結束樣式的寫法有兩種，要麼得經過js來設置結束樣式，要麼動態改變該元素的類名（在新的類名中寫結束樣式）。而在vue.js中，要爲某個元素執行動畫須要如下三步：學習

1.將須要執行動畫的元素用transition標籤包裹起來

2.用起始、過渡、結束的三個類名設置元素的起始、過渡和結束樣式

3.在元素上指定v-show指令（v-show控制元素的顯示和隱藏）

綜上能夠看出vue動畫是以元素的顯示和隱藏做爲動畫的基礎，顯示元素是入場動畫、而隱藏元素則是出場動畫。如下是一個點擊按鈕後h3標籤將從起始樣式（透明度爲0）過渡到結束樣式（透明度爲1）的動畫。

.v-enter {
    opacity: 0; //起始樣式
}

.v-enter-active {
    transition: all 0.9s ease;
}

.v-enter-to {
    opacity: 1;//結束樣式
}

.v-leave{
    opacity: 1; //起始樣式
}

.v-leave-active{
    transition:all 0.9s ease;
}

.v-leave-to{
    opacity: 0; //結束樣式
}

<div id="box">
    <input type="button" @click="flag=!flag" />
    <transition>
        <h3 v-show="flag">hello world</h3>
    </transition>
</div>

var vm = new Vue({
    el: "#box",
    data:{
        flag:false
    }
});

vue組件切換動畫

.v-enter-active,.v-leave-active{
    transition:all 0.3s ease;
}

.v-leave-to{
    opacity:0;
    transform:translateX(-100%);
}

.v-enter{
    opacity:0;
    transform:translateX(100%);
}

修改動畫類名 <transition name="xx">

若是一個vue中有多個html元素都有本身的動畫，那麼v-enter、v-leave將沒法同時知足多個元素的動畫，此時能夠爲transition指定name屬性，指定name後，v-enter中的v變爲name。

.n1-enter{  }
.n1-enter-active{  }
.n1-enter-to{ }
.n1-leave { }
.n1-leave-active { }
.n1-leave-to { }
.n2-enter{  }
.n2-enter-active{  }
.n2-enter-to{ }
.n2-leave { }
.n2-leave-active { }
.n2-leave-to { }

動畫事件 <transition @事件名="xxx">

因爲默認的vue動畫是專用於元素的顯示與隱藏，若是元素須要執行的動畫不是默認的顯示與隱藏，則須要使用動畫事件。

好比購物車小球動畫：

這個動畫僅僅使用動畫狀態類名是沒法完成的。這個過程是：點擊加入購物車按鈕，購物球從無到有顯示出來，接着執行動畫過渡到下方後透明度改成0，但它並不會真正從文檔中消失，若是使用動畫類名控制這個動畫效果，那麼當再次點擊按鈕的時候，購物球會消失，由於按鈕只能重複控制奇數次時購物球顯示偶數次時購物球隱藏這種效果。而正確的需求應該是你第二次點擊購物球的時候它應該繼續執行從無到有再移動到下方的過渡動畫，而使用動畫狀態類名結合按鈕的顯示/隱藏模式並不能知足這個需求，第二次點擊按鈕時它只能控制隱藏購物球。因此，相似於這種半場動畫能夠交給vue的動畫事件來完成，在vue中提供了動畫事件的事件指令，事件指令指向自處理的事件處理函數，你能夠在函數裏設置按鈕所關注的那個控制顯示/隱藏的布爾值，以此達到購物球能夠每次點擊按鈕時看起來都像是從無到有顯示出來的效果。

購物車小球動畫

首先按鈕被點擊後設置flag爲true，而執行動畫的小球元素被v-show控制，一旦flag爲true就會開啓動畫的執行，在各個動畫事件中控制動畫的呈現方式

<body>
    <div class="btn-box">
        <div class="btn-1" @click="clickFlag&&addCar()">加入購物車</div>
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @after-leave="afterLeave">
            <i id="shop-ball" class="shop-ball" v-show="flag"></i>
        </transition>
        <div class="btn-2">當即購買</div>
    </div>
    <img src="/Img/p2.2.jpg" />
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li id="shop-car">購物車</li>
        <li>e</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: ".btn-box",
        data: {
            flag: false,
            clickFlag: true, //防止動畫重疊，防止第一次的動畫還未完成時觸發了第二次動畫
            carPosition: null,
            ballPostion: null,
            xP: null,
            yP: null
        },
        methods: {
            addCar: function () {
                this.flag = !this.flag;
            },
            //初始狀態
            beforeEnter: function (el) {
                el.style.transform = "translate(0, 0)";
                el.style.opacity = "1";
            },
            //過渡狀態
            enter: function (el, done) {
                this.clickFlag = false;
                this.carPosition = document.querySelector("#shop-car").getBoundingClientRect(); //getBoundingClientRect是js原生方法，用於獲取元素的上、左邊距
                this.ballPostion = document.querySelector("#shop-ball").getBoundingClientRect();
                this.xP = this.carPosition.left - this.ballPostion.left+30 ;
                this.yP = this.carPosition.top - this.ballPostion.top;
                el.style.opacity = "1";
                el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)";
                el.style.transform = `translate(${this.xP}px,${this.yP}px)`;
                done();
            },
            //結束狀態
            afterEnter: function (el) {
                this.flag = !this.flag;

            },
            afterLeave: function (el) {
                this.clickFlag = true;
                el.style.transform = "translate(0, 0)";
            }
        }
    });
</script>

在v-for元素上使用vue動畫 transition-group

在v-for的元素上不能應用transition而應改成transition-group。如下實現一個添加新項到列表時的入場動畫和刪除列項時的出場動畫。

ul{
list-style:none;
}
li{
background:#b6ff00;
}

/*從無到有*/
.v-enter{
    opacity:0;
    transform:translateY(100px);
}

.v-enter-active{
    transition:all 0.6s ease;
}

/*從有到無*/
.v-leave-to{
    opacity:0;
    transform:translateY(100px);
}

.v-leave-active{
    transition:all 0.6s ease;
}

<div id="box">
    <input type="text" v-model="id" />
    <input type="text" v-model="stu" />
    <button @click="add">test</button>
    <transition-group appear tag="ul"> 若是須要在網頁一打開就顯示整個列表的動畫效果，須要爲transition-group指定一個appear，再指定該標籤被當作ul使用
    <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
        {{item.id}},{{item.stu}}
    </li>
    </transition-group>
</div>

var vm = new Vue({
    el: "#box",
    data: {
        id:"",
        stu:null,
        list: [
           {id:1,stu:"sam"}
        ]
    },
    methods: {
        add: function () {
             this.list.push({ id: this.id, stu: this.stu});
        },
        del: function (index) {
            this.list.splice(index,1);
        }
}

上圖中當刪除一項時，下面一項沒有以動畫過渡的形式頂替上一項的位置，可增長下面兩個類來改善動畫效果。

1.v-move：使當刪除列表某項時，它的下一項會接收到位置的變化，能夠以動畫的效果頂替被刪除的元素的位置

2.被刪除的元素必須絕對定位