【Vue】学习笔记三：动画、过渡

比眉伴天荒 2021-09-20 23:46 419阅读 0赞

### 文章目录 ###

*   *   *  使用过渡类名
         *  \[使用第三方 CSS 动画库\](https://cn.vuejs.org/v2/guide/transitions.html\#自定义过渡类名)
         *  使用动画钩子函数
         *  \[v-for 的列表过渡\](https://cn.vuejs.org/v2/guide/transitions.html\#列表的进入和离开过渡)
         *  列表的排序过渡

### 使用过渡类名 ###

**1. HTML结构：**

**2. VM 实例：**

// 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({ 
      el: '#app',
      data: { 
        isshow: false
      },
      methods: { 
        myAnimate() { 
          this.isshow = !this.isshow;
        }
      }
    });

**3. 定义两组类样式：**

/* 定义进入和离开时候的过渡状态 */
        .fade-enter-active, .fade-leave-active { 
          transition: all 0.2s ease;
          position: absolute;
        }
    
        /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
        .fade-enter, .fade-leave-to { 
          opacity: 0;
          transform: translateX(100px);
        }

### [使用第三方 CSS 动画库][CSS] ###

1.  导入动画类库：

1.  定义 transition 及属性：

### 使用动画钩子函数 ###

**1. 定义 transition 组件以及三个钩子函数：**

**2. 定义三个 methods 钩子方法：**

methods: { 
            beforeEnter(el) {  // 动画进入之前的回调
              el.style.transform = 'translateX(500px)';
            },
            enter(el, done) {  // 动画进入完成时候的回调
              el.offsetWidth;
              el.style.transform = 'translateX(0px)';
              done();
            },
            afterEnter(el) {  // 动画进入完成之后的回调
              this.isshow = !this.isshow;
            }
          }

**3. 定义动画过渡时长和样式：**

.show{ 
          transition: all 0.4s ease;
     }

### [v-for 的列表过渡][v-for] ###

**1. 定义过渡样式：**

**2. 定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：**

**3. 定义 VM中的结构：**

// 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({ 
          el: '#app',
          data: { 
            txt: '',
            list: [1, 2, 3, 4]
          },
          methods: { 
            add() { 
              this.list.push(this.txt);
              this.txt = '';
            }
          }
        });

### 列表的排序过渡 ###

`<transition-group>` 组件还有一个特殊之处。不仅可以进入和离开动画，**还可以改变定位**。要使用这个新功能只需了解新增的 `v-move` 特性，**它会在元素的改变定位的过程中应用**。

*  `v-move` 和 `v-leave-active` 结合使用，能够让列表的过渡更加平缓柔和：

.v-move{ 
      transition: all 0.8s ease;
    }
    .v-leave-active{ 
      position: absolute;
    }

[CSS]: https://cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%B1%BB%E5%90%8D
[v-for]: https://cn.vuejs.org/v2/guide/transitions.html#%E5%88%97%E8%A1%A8%E7%9A%84%E8%BF%9B%E5%85%A5%E5%92%8C%E7%A6%BB%E5%BC%80%E8%BF%87%E6%B8%A1