Vue之animate
阿新 • • 發佈：2020-09-08
1、非列表的動畫
將需要進行動畫的元素用transition 包裹起來
在style裡進行動畫設定
進入的時候動畫：v-enter{//動畫的開始 transform:...}、v-enter-active{ //動畫的過渡transition:...}、v-active-to{// 動畫的結束transform:....}
離開的時候的動畫：v-leave{//動畫的開始 transform:...}、v-leave-active{ //動畫的過渡transition:...}、v-leave-to{// 動畫的結束transform:....}
1 <!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title></title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10<style> 11 .v-enter { 12 opacity: 0; 13 transform: translate(-100%); 14 } 15 16 .v-enter-active, 17 .v-leave-active { 18 transition: all 2s ease; 19 } 20 21 .v-enter-to, 22 .v-leave { 23 opacity: 1;24 transform: translate(0); 25 } 26 27 .v-leave-to { 28 opacity: 0; 29 transform: translate(100%); 30 } 31 32 /* 王者的 */ 33 .wangzhe-enter { 34 opacity: 0; 35 transform: translate(100%); 36 } 37 38 .wangzhe-enter-active, 39 .wangzhee-leave-active { 40 transition: all 2s ease; 41 } 42 43 .wangzhe-enter-to, 44 .wangzhe-leave { 45 opacity: 1; 46 transform: translate(0); 47 } 48 49 .wangzhe-leave-to { 50 opacity: 0; 51 transform: translate(-50%); 52 } 53 </style> 54 </head> 55 56 <body> 57 <div id='app'> 58 59 <transition appear name='wangzhe'> 60 <div v-show="tflag">歡迎來到王者榮耀</div> 61 </transition> 62 <button @click="tflag=!tflag">切換</button> 63 64 <!-- 1、appear 讓一上來就有動畫效果 --> 65 <transition appear> 66 <div v-show="flag">歡迎來到召喚者峽谷</div> 67 </transition> 68 <button @click="flag=!flag">切換</button> 69 </div> 70 <script> 71 const vm = new Vue({ 72 el: '#app', 73 data: { 74 flag: true, 75 tflag: true 76 }, 77 methods: { 78 } 79 }) 80 </script> 81 </body> 82 83 </html>
2、列表的動畫
將元素用 transition-group包裹起來
style一樣的設定
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>列表</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 <style> 11 ul { 12 margin: 200px; 13 } 14 15 li { 16 cursor: pointer; 17 } 18 19 .v-enter, 20 .v-leave-to { 21 opacity: 0; 22 transform: translateY(100%); 23 } 24 25 .v-enter-active { 26 transition: all 2s ease; 27 } 28 29 .v-enter-to, 30 .v-leave { 31 transform: translateY(0); 32 } 33 34 .v-leave-active { 35 position: absolute; 36 } 37 38 .v-move { 39 transition: all 2s ease; 40 } 41 </style> 42 </head> 43 44 <body> 45 <div id='app'> 46 47 48 <transition-group tag="ul" appear> 49 <li v-for="(item,index) in list" :key="item.id" @click="del(index)"> 50 {{item.name}} 51 </li> 52 </transition-group> 53 </div> 54 <script> 55 const vm = new Vue({ 56 el: '#app', 57 data: { 58 list: [ 59 { id: 1, name: "牧馬人" }, 60 { id: 2, name: "北極光" }, 61 { id: 3, name: "大G" }, 62 { id: 4, name: "豐田" }, 63 ] 64 }, 65 methods: { 66 del(index) { 67 console.log(index); 68 this.list.splice(index, 1) 69 } 70 } 71 }) 72 </script> 73 </body> 74 75 </html>
添加了 v-move{}
v-leave-active{position:absolute} 實現刪除的時候的平穩效果
3、第三方css動畫庫
https://animate.style/
使用：
enter-active-class 以及 leave-active-class 中要加上animate_animated 才行
duration 動畫啟用的時長
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title></title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" /> 11 </head> 12 13 <body> 14 <div id='app'> 15 16 <transition appear enter-active-class="animate__animated animate__lightSpeedInLeft" 17 leave-active-class="animate__animated animate__rotateOutDownRight" :duration={enter:2000,leave:2000}> 18 <div v-show="flag">歡迎來到召喚者峽谷</div> 19 </transition> 20 <button @click="flag=!flag">切換</button> 21 </div> 22 <script> 23 const vm = new Vue({ 24 el: '#app', 25 data: { 26 flag: true 27 }, 28 methods: { 29 } 30 }) 31 </script> 32 </body> 33 34 </html>
使用步驟
1、引入 css
2、enter-active-class=" "
leave-active-class=""
使用的時候加上 animate_animated
3、duration 指定動畫啟用的時長
duration="1000"
:duration="{enter:3000,leave:1000}"