VUE—从入门到飞起（三）
生活随笔
收集整理的這篇文章主要介紹了
VUE—从入门到飞起（三）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
?
動畫
顯示隱藏（不使用動畫）
使用過渡類名
使用第三方類animate.css實現動畫
使用鉤子函數模擬小球半場動畫
列表動畫
VUE—從入門到飛起（一）
VUE—從入門到飛起（二）
VUE—從入門到飛起（三）
VUE—從入門到飛起（四）
VUE—從入門到飛起（五）
動畫
顯示隱藏（不使用動畫）
<body><div id="app"><!--需求：點擊按鈕，讓h3顯示，再點擊隱藏--><button @click="flag = !flag">顯示隱藏</button><h3 v-show="flag">這是一個h3</h3></div> </body> <script>var vm = new Vue({el:"#app",data:{flag : false},methods:{}}) </script>使用過渡類名
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>過渡類名1</title><script src="../../../thirdlib/vue/vue.js"></script><style>/* v-enter【這是一個時間點】是進入之前，元素的起始狀態，此時還沒有開始進入*//* v-leave-to【這是一個時間點】 是動畫離開之后，離開的終止狀態，此時元素動畫已經結束了*/.v-enter,.v-leave-to{opacity: 0;transform: translateX(80px);}/*v-enter-active 【入場動畫的時間段】 *//*v-leave-active 【離場動畫的時間段】 */.v-enter-active,.v-leave-active{transition: all 0.8s ease;}</style></head><body><div id="app"><!--需求：點擊按鈕，讓h3顯示，再點擊隱藏--><!--使用transition元素，把需要被動畫控制的元素，包裹起來，這是vue官方提供的--><button @click="flag = !flag">顯示隱藏</button><transition><h3 v-show="flag">這是一個h3</h3></transition></div></body><script>var vm = new Vue({el:"#app",data:{flag : false},methods:{}})</script> </html> <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>過渡類名2</title><script src="../../../thirdlib/vue/vue.js"></script><style>/* v-enter【這是一個時間點】是進入之前，元素的起始狀態，此時還沒有開始進入*//* v-leave-to【這是一個時間點】 是動畫離開之后，離開的終止狀態，此時元素動畫已經結束了*/.v-enter,.v-leave-to{opacity: 0;transform: translateX(80px);}/*v-enter-active 【入場動畫的時間段】 *//*v-leave-active 【離場動畫的時間段】 */.v-enter-active,.v-leave-active{transition: all 0.8s ease;}/*h6的 name="my"， 前綴就是my，可以區分不同組的動畫*/.my-enter,.my-leave-to{opacity: 0;transform: translateY(80px);}.my-enter-active,.my-leave-active{transition: all 0.8s ease;}</style></head><body><div id="app"><!--需求：點擊按鈕，讓h3顯示，再點擊隱藏--><!--使用transition元素，把需要被動畫控制的元素，包裹起來，這是vue官方提供的--><button @click="flag = !flag">顯示隱藏</button><transition><h3 v-show="flag">這是一個h3</h3></transition><hr /><button @click="flag2 = !flag2">顯示隱藏2</button><transition name="my"><h6 v-show="flag2">這是一個h2</h6></transition></div></body><script>var vm = new Vue({el:"#app",data:{flag : false,flag2 : false},methods:{}})</script> </html>使用第三方類animate.css實現動畫
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>animate</title><script src="../../../thirdlib/vue/vue.js"></script><link rel="stylesheet" href="../../../thirdlib/css/animate.css" /><!--入場 bounceIn 離場bounceOut--><style></style></head><body><div id="app"><!--需求：點擊按鈕，讓h3顯示，再點擊隱藏--><!--使用transition元素，把需要被動畫控制的元素，包裹起來，這是vue官方提供的--><button @click="flag = !flag">顯示隱藏</button><!--<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut"><h3 v-show="flag">這是一個h3</h3></transition>--><!--:duration設置入場、離場花費的時間（毫秒）--><!--<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="400"><h3 v-show="flag" class="animated">這是一個h3</h3></transition>--><!--:duration傳一個對象，可以分別控制入場、離場花費時間--><transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:200, leave:400}"><h3 v-show="flag" class="animated">這是一個h3</h3></transition></div></body><script>var vm = new Vue({el:"#app",data:{flag : false},methods:{}})</script> </html>使用鉤子函數模擬小球半場動畫
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>動畫鉤子函數</title><script src="../../../thirdlib/vue/vue.js"></script><style>.ball{width: 15px;height: 15px;border-radius: 50%;background-color: red;}</style></head><body><div id="app"><input type="button" value="快到碗里來" @click="flag = !flag" /><!--進入半場動畫、出去半場動畫這里就是將enter改為leave--><transitionv-on:before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"@enter-cancelled=""><div v-show="flag" class="ball"></div></transition></div><script>var vm = new Vue({el : "#app",data : {flag : false},methods:{//注意：動畫鉤子函數的第一個參數el，表示要執行動畫的那個元素是個源生的dom對象//相當于document.getElementById('')獲取的源生對象beforeEnter(el){//beforeEnter表示動畫入場之前，此時動畫尚未開始，可以在beforeEnter中設置元素開始動畫之前的起始樣式//設置小球開始動畫之前的起始位置el.style.transform = "translate(0, 0)";},enter(el, done){//這句話沒有實際的作用，但是，如果不寫，出不來動畫效果//可以認為，el.offsetWidth會強制動畫刷新（offset相關都可）el.offsetWidth;//表示動畫 開始之后的樣式，這里可以設置小球完成動畫之后的結束狀態el.style.transform = "translate(150px, 450px)";el.style.transition = 'all 1s ease';////這里的done其實就是afterEnter這個函數，也就是說done()是afterEnter函數的引用//這是必須的done();},afterEnter(el){//動畫完成之后會調用this.flag = !this.flag;}}})</script></body> </html>列表動畫
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>數據列表實現動畫</title><script src="../../../thirdlib/vue/vue.js"></script><style>li{border : 1px dashed #999;margin: 5px;line-height: 35px;padding-left: 5px;font-size: 12px;width: 100%;}.v-enter,.v-leave-to{opacity: 0;transform: translateY(80px);}.v-enter-active,.v-leave-active{transition: all 0.6s ease;}/*下面的.v-move和.v-leave-active配合使用能夠實現列表后續元素漸漸飄上來的效果*/.v-move{transition: all 0.6s ease;}.v-leave-active{position:absolute;}li:hover{background-color: hotpink;transition: all 0.8s ease;}</style></head><body><div id="app"><div><label>id:<input type="text" v-model="id" /></label><label>name:<input type="text" v-model="name" /></label><input type="button" value="添加" @click="add" /></div><!--在實現列表過度的時候，如果需要過度的元素是用v-for渲染的，不能用transition包裹，需要使用transition-group--><!--如果要為v-for循環設置動畫，比如為每一個元素設置:key屬性--><!--<ul>--><!--給transition-group添加appear屬性實現頁面剛展示出來的入場效果--><!--如果不指定tag，默認渲染為一個span--><transition-group appear tag="ul"><li v-for="(item, i) in list" :key="item.id" @click="del(i)">{{ item.id }} --- {{ item.name }}</li></transition-group><!--</ul>--></div><script>var vm = new Vue({el : "#app",data : {list:[{id :1, name:'張三'},{id:2, name:'李四'},{id:3, name:'王五'}],id : "",name:""},methods:{add(){this.list.push({id:this.id, name:this.name});this.id = this.name = "";},del(i){this.list.splice(i ,1);}}})</script></body> </html>?
總結
以上是生活随笔為你收集整理的VUE—从入门到飞起（三）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VUE—从入门到飞起（二）
- 下一篇： VUE—从入门到飞起（四）