024.animate.css动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../js/vue.js"></script> 7 <link rel="stylesheet" href="../css/animate.min.css"> 8 <style> 9 .fade-enter, .fade-leave-to { 10 opacity: 0; 11 } 12 13 .fade-enter-active, .fade-leave-active { 14 transition: opacity 1s; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="app" class="animated"> 20 <button @click="change">切换</button> 21 <!--duration 播放时长 appear 进入页面执行 以type定义的动画时长为准--> 22 <transition name="fade" 23 :duration="2000" 24 type="transition" 25 appear 26 enter-active-class="animated bounceIn" 27 leave-active-class="animated bounceOut" 28 appear-active-class="animated bounceIn"> 29 <div v-show="show">hello</div> 30 </transition> 31 </div> 32 <script> 33 var vm = new Vue({ 34 el: "#app", 35 data: { 36 show: true 37 }, 38 methods: { 39 change: function () { 40 this.show = !this.show; 41 } 42 } 43 }); 44 </script> 45 </body> 46 </html>
025.切换动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../js/vue.js"></script> 7 <style> 8 .v-enter, .v-leave-to { 9 opacity: 0; 10 } 11 12 .v-enter-active, .v-leave-active { 13 transition: opacity 1s; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="app"> 19 <button @click="handleClick">切换</button> 20 <!--mode out-in先隐藏再显示--> 21 <transition mode="out-in"> 22 <div v-if="show" key="one">welcome</div> 23 <div v-else key="two">china</div> 24 </transition> 25 </div> 26 <script> 27 var vm = new Vue({ 28 el: "#app", 29 data: { 30 show: true 31 }, 32 methods: { 33 handleClick: function () { 34 this.show = !this.show; 35 } 36 } 37 }); 38 </script> 39 </body> 40 </html>
026.动态组件动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../js/vue.js"></script> 7 <style> 8 .v-enter, .v-leave-to { 9 opacity: 0; 10 } 11 12 .v-enter-active, .v-leave-active { 13 transition: opacity .7s; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="app"> 19 <button @click="changes">切换</button> 20 <transition mode="out-in"> 21 <component :is="type"></component> 22 </transition> 23 </div> 24 <script> 25 var child_one = { 26 template: '<div key="one">welcome</div>' 27 }; 28 var child_two = { 29 template: '<div key="two">china</div>' 30 } 31 var vm = new Vue({ 32 el: "#app", 33 components: { 34 child_one: child_one, 35 child_two: child_two 36 }, 37 data: { 38 type: "child_one" 39 }, 40 methods: { 41 changes: function () { 42 this.type = this.type === "child_one" ? "child_two" : "child_one"; 43 } 44 } 45 }); 46 </script> 47 </body> 48 </html>
027.列表过渡
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../js/vue.js"></script> 7 <style> 8 .v-enter, .v-leave-to { 9 opacity: 0; 10 } 11 12 .v-enter-active, .v-leave-active { 13 transition: opacity .7s; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="app"> 19 <button @click="add">添加</button> 20 <transition-group> 21 <div v-for="item of list" :key="item.id"> 22 {{item.id}} -- {{item.title}} 23 </div> 24 </transition-group> 25 </div> 26 <script> 27 var num = 0; 28 var vm = new Vue({ 29 el: "#app", 30 data: { 31 list: [] 32 }, 33 methods: { 34 add: function () { 35 this.list.push({ 36 id: num++, 37 title: "ronle" 38 }) 39 } 40 } 41 }); 42 </script> 43 </body> 44 </html>
028.Velocity.js动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../js/vue.js"></script> 7 <script src="../js/velocity.min.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <button @click="changes">切换</button> 12 <transition 13 name="fade" 14 @before-enter="beforeEnter" 15 @enter="enter" 16 @after-enter="afterEnter" 17 @before-leave="beforeLeave" 18 @leave="leave" 19 @after-leave="afterLeave"> 20 <div v-show="show">test</div> 21 </transition> 22 </div> 23 <script> 24 var vm = new Vue({ 25 el: '#app', 26 data: { 27 show: true 28 }, 29 methods: { 30 changes: function () { 31 this.show = !this.show; 32 }, 33 beforeEnter: function (el) { 34 el.style.opacity = 0; 35 }, 36 enter: function (el, done) { 37 Velocity(el, {opacity: 1}, {duration: 1000, complete: done}) 38 }, 39 afterEnter: function (el) { 40 41 }, 42 beforeLeave: function (el) { 43 el.style.opacity = 1; 44 }, 45 leave: function (el, done) { 46 Velocity(el, {opacity: 0}, {duration: 1000, complete: done}) 47 }, 48 afterLeave: function () { 49 50 } 51 } 52 }); 53 </script> 54 </body> 55 </html>
029.动画封装
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../js/vue.js"></script> 7 <script src="../js/velocity.min.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <button @click="changes">点击</button> 12 <fade :show="show"> 13 <div>demo 展示</div> 14 </fade> 15 </div> 16 <script> 17 var fade = { 18 props: ['show'], 19 template: '<transition' + 20 '@before-enter="beforeEnter"' + 21 '@enter="enter" ' + 22 '@after-enter="afterEnter" ' + 23 '@before-leave="beforeLeave" ' + 24 '@leave="leave" ' + 25 '@after-leave="afterLeave">' + 26 '<slot v-if="show"></slot>' + 27 '</transition>', 28 methods: { 29 beforeEnter: function (el) { 30 el.style.opacity = 0; 31 }, 32 enter: function (el, done) { 33 Velocity(el, {opacity: 1}, {duration: 1000, complete: done}) 34 }, 35 afterEnter: function (el) { 36 console.log("进入动画结束") 37 }, 38 beforeLeave: function (el) { 39 el.style.opacity = 1; 40 }, 41 leave: function (el, done) { 42 Velocity(el, {opacity: 0}, {duration: 1000, complete: done}) 43 }, 44 afterLeave: function () { 45 console.log("离开动画结束") 46 } 47 } 48 } 49 var vm = new Vue({ 50 el: "#app", 51 components: { 52 fade: fade 53 }, 54 data: { 55 show: true 56 }, 57 methods: { 58 changes: function () { 59 this.show = !this.show; 60 } 61 } 62 }); 63 </script> 64 </body> 65 </html>