過渡動(dòng)畫入門
- 導(dǎo)入包animate.min.css
- 設(shè)置動(dòng)畫的樣式
1） 過度的類名：v-enter-active 和 v-leave-active
2） v-enter-active ：進(jìn)入 包括 v-enter和v-enter-to
3）v-leave-active ：離開 包括 v-leave和v-leave-to - 將動(dòng)畫內(nèi)容放入<transition>標(biāo)簽中
- 過渡動(dòng)畫入門演示：點(diǎn)擊按鈕噪服，讓h3現(xiàn)實(shí)碍脏，再點(diǎn)擊，讓h3隱藏
1）使用transition元素会前，是官方提供的
2）自定義兩組樣式春弥，來控制transition內(nèi)部的元素實(shí)現(xiàn)動(dòng)畫<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue動(dòng)畫</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <link rel="stylesheet" > <style> /* v-enter 【這是一個(gè)時(shí)間點(diǎn)】 是進(jìn)入之前舞吭，元素的起始狀態(tài)算行，此時(shí)還沒有開始進(jìn)入 */ /* v-leave-to 【這是一個(gè)時(shí)間點(diǎn)】 是離開之后努释，離開的終止?fàn)顟B(tài)，此時(shí)疫鹊，元素動(dòng)畫已經(jīng)結(jié)束 */ .v-eneter, .v-leave-to{ opacity: 0; transform: tanslateX(100px) } /* v-enter-active 入場(chǎng)動(dòng)畫的時(shí)間段 */ /* v-leave-active 離場(chǎng)動(dòng)畫的時(shí)間段 */ .v-enter-active, .v-leave-active{ transition: all 0.8s ease; } </style> </head> <body> <div id="app"> <input type="button" value="toggle" v-on:click="flag = !flag"> <transition> <h3 v-if="flag">這是一個(gè)H3</h3> </transition> </div> <script> var vm = new Vue({ el: "#app", data: { flag: false } }) </script> </body> </html>
