Vuejs——（7）过渡（动画）

时间：2022-08-11 09:20:00

版权声明：出处http://blog.csdn.net/qq20004604

 

目录(?)[+]

 

本篇资料来于官方文档：

http://cn.vuejs.org/guide/transitions.html

本文是在官方文档的基础上，更加细致的说明，代码更多更全。

简单来说，更适合新手阅读

（二十四）过渡动画

①过渡动画的定义；

简单来说，就是当模块消失、出现时，会以什么样的形式消失和出现；

如果要使用过渡动画，则在标签里加入属性：

transition=”过渡动画名”

例如：

  1. <div class="box" v-if="box_1" transition="mytran">1</div>

这里是mytran就是过渡动画名，他是一个类名，动画将基于这个名字而添加多个不同的扩展名（具体请参看下面）

②过渡动画绑定的事件：

【1】v-if

【2】v-show

【3】v-for（只在插入和删除时触发，可以自己写，或者使用vue-animated-list插件）；

自己写例如：

  1. <div v-for="i in items" class="box" transition="mytran">{{i}}</div>

动画写法略（参照下面）

【4】动态组件；

【5】在组件的根节点上，并且被Vue实例DOM方法触发（例如：vm.$appendTo(el)）。大概就是说，把组件添加到某个根节点上去。

③CSS动画：

【1】首先，需要有transition属性，然后取得其值；

【2】其次，CSS里需要有以值为名的三个类名，分别是：

假设transition的值为mytran，则类名为

说明

.mytran-transition

动画状态，css的transition属性放在这里，他表示的类会始终存在于DOM之上；

另外这里的样式会覆盖标签的默认class提供的样式

.mytran-enter

进入时，组件从这个css状态扩展为当前css状态，这个类只存在最开始的一帧

.mytran-leave

退出时，组件从原来的css状态恢复为这个状态，这个类从退出开始时生效，在退出结束时删除。

如代码：

  1. <style>
  2. .box {
  3. width: 100px;
  4. height: 100px;
  5. border: 1px solid red;
  6. display: inline-block;
  7. }
  8. /*这个定义动画情况，以及存在时的样式，这个样式会覆盖class里的样式*/
  9. .mytran-transition {
  10. transition: all 0.3s ease;
  11. background-color: greenyellow;
  12. }
  13. /* .mytran-enter 定义进入的开始状态 */
  14. /* .mytran-leave 定义离开的结束状态 */
  15. .mytran-enter, .mytran-leave {
  16. height: 0;
  17. width: 0;
  18. }
  19. </style>
  20. <div id="app">
  21. <button @click="change">点击随机隐藏和显示</button>
  22. <br/>
  23. <div class="box" v-if="box_1" transition="mytran">1</div>
  24. <div class="box" v-if="box_2" transition="mytran">2</div>
  25. <div class="box" v-if="box_3" transition="mytran">3</div>
  26. </div>
  27. <script>
  28. var vm = new Vue({
  29. el: '#app',
  30. data: {
  31. box_1: true,
  32. box_2: true,
  33. box_3: true
  34. },
  35. methods: {
  36. change: function () {
  37. for (var i = 1; i < 4; i++) {
  38. this['box_' + i] = Math.random() > 0.5 ? true : false;
  39. }
  40. }
  41. }
  42. })
  43. setInterval(vm.change, 300);
  44. </script>

点击会随机让3个方块隐藏或者显示；

④JavaScript钩子：

【1】简单来说，这个不影响CSS动画（依然是那三个类的变化）；

【2】这个主要用于抓取进入和离开各四个时刻，用于做某些事情；

【3】这八个时刻分别为：

进入：beforeEnter（进入之前），enter（进入动画刚开始），afterEnter（进入动画结束），enterCancelled（进入被中断）；

退出：beforeLeave（退出之前），leave（退出动画刚开始），afterLeave（退出动画结束），leaveCancelled（退出被中断）；

【4】对DOM的修改，部分情况下会恢复，例如在leave这一步修改dom的textContent属性，将在dom重新进入时恢复原状；但若在enter这一步修改，则不会恢复。

如代码：

  1. Vue.transition('mytran', {
  2. beforeEnter: function (el) {    //进入之前
  3. console.log("进入动画开始时间:" + new Date().getTime());
  4. },
  5. enter: function (el) {
  6. el.textContent = new Date();
  7. },
  8. afterEnter: function (el) {
  9. console.log("进入结束时间:" + new Date().getTime());
  10. },
  11. beforeLeave: function (el) {
  12. console.log("离开动画开始时间:" + new Date().getTime());
  13. },
  14. leave: function (el) {
  15. $(el).text("离开中..." + new Date());
  16. },
  17. afterLeave: function (el) {
  18. console.log("离开结束时间:" + new Date().getTime());
  19. }
  20. })

⑤自定义过渡类名：

之所以要自定义过渡类名，是因为我们不可能要求每个css动画的样式，都是按照Vuejs标准的写法来写的（比如我们下载别人写的代码）；

注：需要在声明相关的Vue实例之前进行定义。

首先，推荐一个Vuejs官方教程推荐的动画集合：（这个不是下载链接，需要打开它去找到下载链接才能下载）

https://daneden.github.io/animate.css/

下载后，导入这个css文件，然后开始自定义动画；

  1. <div id="app">
  2. <button @click="change">点击随机隐藏和显示</button>
  3. <br/>
  4. <div class="box animated" v-if="box" transition="bounce">1</div>
  5. </div>
  6. <script>
  7. Vue.transition("bounce", {
  8. enterClass: 'bounceInLeft',
  9. leaveClass: 'bounceOutRight'
  10. })
  11. var vm = new Vue({
  12. el: '#app',
  13. data: {
  14. box: true
  15. },
  16. methods: {
  17. change: function () {
  18. this.box = !this.box;
  19. }
  20. }
  21. });
  22. </script>

解释：

【1】进行动画的标签，需要有animated这个class；

【2】enterClass和leaveClass相当于之前的xxx-enter和xxx-leave；

【3】效果是从左边闪进来，从右边闪出去。

【4】需要在声明Vue实例前设置动画，否则会无效；

⑥使用animation动画

在Vuejs中，animation动画和transition动画是不同的。

简单来说，transition动画分为三步：常驻类，进入时触发的类，退出时触发的类；只有常驻类有transition动画属性，其他两步只有css状态；

而animation动画分为两步：进入时触发的类，退出时触发的类。当然，还有xxx-transition这个类存在于dom之中（这个类可以用于设置动画原点，或者干脆不设置这个类）；

在animation动画中，进入和退出时的class类，都应该有动画效果，例如：

  1. @keyframes fat {
  2. 0% {
  3. width: 100px
  4. }
  5. 50% {
  6. width: 200px
  7. }
  8. 100% {
  9. width: 100px
  10. }
  11. }
  12. .fat-leave, .fat-enter {
  13. animation: fat 1s both;
  14. }

进入和退出时，执行的类名和transition一样，都是xxx-leave和xxx-enter这样格式的；

当然，也可以自定义类名。

示例代码：

  1. <style>
  2. .box {
  3. width: 100px;
  4. height: 100px;
  5. border: 1px solid red;
  6. display: inline-block;
  7. }
  8. @keyframes fat {
  9. 0% {
  10. width: 100px
  11. }
  12. 50% {
  13. width: 200px
  14. }
  15. 100% {
  16. width: 100px
  17. }
  18. }
  19. .fat-leave, .fat-enter {
  20. animation: fat 1s both;
  21. }
  22. </style>
  23. <div id="app">
  24. <button @click="change">点击随机隐藏和显示</button>
  25. <br/>
  26. <div class="box animated" v-if="box" transition="fat">1</div>
  27. </div>
  28. <script>
  29. var vm = new Vue({
  30. el: '#app',
  31. data: {
  32. box: true
  33. },
  34. methods: {
  35. change: function () {
  36. this.box = !this.box;
  37. }
  38. }
  39. });
  40. </script>

效果：

消失：先变宽，再恢复，然后消失；

进入：出现，变宽，再恢复，停留；

这里偷懒共用了同一个动画效果。

⑦除此之外，还有

【1】显式声明动画类型（假如动画同时存在transition和animation，且分情况执行其中一种）；

【2】过渡流程详解（触发动画时，js钩子执行与css执行的顺序）；

【3】CSS动画（就是animation，像上面那样已经写过了，具体略）；

【4】JavaScript过渡（不是js钩子，钩子是指在某个阶段会调用某个函数，但这个钩子跟动画无关），用JavaScript来控制动画，比如jQuery的animate方法；

【5】v-for使用的渐进过渡；

由于暂时用不上，所以略掉，需要查看的请打开连接：

http://cn.vuejs.org/guide/transitions.html

相关文章