1. CSS动画原理
CSS:
<style type="text/css"> .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 1s; } .fade-leave-to{ opacity: 0; } .fade-leave-active{ transition: opacity 1s; } </style>
HTML：
<transition name="fade"> <div v-if="show">hello world</div> </transition>
或：
<transition-group> <div v-for="(item,index) in list" :key="item.id">{{item.title}}</div> </transition-group>
css 中的每个开头都以 fade 开头，原因是因为给 transition 的 name 属性为 fade。 如果不写默认开头为 v(例如：.v-enter)最终效果如下：
CSS:
<style type="text/css"> .v-enter, .v-leave-to{ opacity: 0; } .v-enter-active, .v-leave-active{ transition: opacity 1s; } </style>
HTML:
<body> <div id="root"> <transition> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切换</button> </div> <script> var vm = new Vue({ el: "#root", data: { show: true }, methods: { handleClick: function() { this.show = !this.show } } }) </script> </body>
2. CSS动画使用
CSS:
<style type="text/css"> @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .active{ transform-origin: left center; animation: bounce-in 1s; } .leave{ transform-origin: left center; animation: bounce-in 1s reverse; } </style>
HTML：
<body> <div id="root"> <transition name="fade" enter-active-class="active" leave-active-class="leave" > <div v-if="show">hello world</div> </transition> <button @click="handleClick">切换</button> </div> <script> var vm = new Vue({ el: "#root", data: { show: true }, methods: { handleClick: function() { this.show = !this.show } } }) </script> </body>
3. Animate动画的使用
Animate 所提供的动画其实是 @keyframes 动画，是属于CSS3的。
<link rel="stylesheet" type="text/css" href="../animate.css">
导入 animate.css ，使用时注意，必须实现 enter-active-class 与 leave-active-class 且包含 animated 字段， animated 字段后面才是动画效果，动画效果可在官网中选取(例如：enter-active-class="animated 动画效果")固定写法。
<body> <div id="root"> <transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake" > <div v-if="show">hello world</div> </transition> <button @click="handleClick">切换</button> </div> <script> var vm = new Vue({ el: "#root", data: { show: true }, methods: { handleClick: function() { this.show = !this.show } } }) </script> </body>
上面这个动画呢有个缺点就是在首次显示(也就是页面刚出现的时候)的时候没有动画效果，如果想要一开始就带有动画效果则需要下面的 appear 书写方式：
<body> <div id="root"> <transition name="fade" appear enter-active-class="animated swing" leave-active-class="animated shake" appear-active-class="animated swing"> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切换</button> </div> <script> var vm = new Vue({ el: "#root", data: { show: true }, methods: { handleClick: function() { this.show = !this.show } } }) </script> </body>
3. Animate(@keyframes)动画 与 过渡动画(transition)效果结合
两者动画结合只需要在 enter-active-class 与 leave-active-class 后面加上过渡动画类型即可，但是两者动画时间可能会不一致，那么：
- 可以通过 type="transition" 来约束动画以当前的过渡动画时间为准。
- :duration="5000" 自定义动画时间5秒
- :duration="{enter: 5000, leave: 10000}" 自定义出场动画5秒，离场动画10秒
CSS：
<style type="text/css"> .fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 3s; } </style>
HTML：
<body> <div id="root"> <transition name="fade" :duration="{enter: 5000, leave: 10000}" //:duration="5000" //type="transition" appear enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing"> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切换</button> </div> <script> var vm = new Vue({ el: "#root", data: { show: true }, methods: { handleClick: function() { this.show = !this.show } } }) </script> </body>
4. 动画过程回调函数监听
@before-leave: 将要执行离场动画 @leave: 正在执行离场动画 @after-leave: 离场动画执行完成 @before-enter: 将要执行入场动画 @enter: 正在执行入场动画 @after-enter: 入场动画执行完成
<body> <div id="root"> <transition name="fade" @before-leave="handleBeforeLeave" @leave="handleLeave" @after-leave="handleAfterLeave" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter"> <child v-show="show"></child> </transition> <button @click="handleClick">切换</button> </div> <script> Vue.component('child', { template: '<div>hello world</div>' }) var vm = new Vue({ el: "#root", data:{ show: true }, methods: { handleClick: function() { this.show = !this.show }, handleBeforeEnter: function(el) { el.style.color = 'red'; }, handleEnter: function(el, done) { setTimeout(() => { el.style.color = 'green' }, 2000); setTimeout(() => { done() }, 4000); }, handleAfterEnter: function(el) { el.style.color = '#000' } } }) </script> </body>
5. velocity 动画
<script src="../velocity.min.js"></script>
导入完成之后开始使用
<body> <div id="root"> <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter"> <child v-show="show"></child> </transition> <button @click="handleClick">切换</button> </div> <script> Vue.component('child', { template: '<div>hello world</div>' }) var vm = new Vue({ el: "#root", data:{ show: true }, methods: { handleClick: function() { this.show = !this.show }, handleBeforeEnter: function(el) { el.style.opacity = 0; }, handleEnter: function(el, done) { Velocity(el, {opacity: 1}, {duration: 1000, complete: done}) }, handleAfterEnter: function(el) { alert('动画结束') } } }) </script> </body>
