学习Vue中的动画

谁践踏了优雅 2021-09-03 03:02 370阅读 0赞

前言: 为什么要有[Vue中的动画][Vue]：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；

## 一：使用过渡类名 ##

1.  HTML结构：

1.  VM 实例：

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

1.  定义两组类样式：

/* 定义进入和离开时候的过渡状态 */
     .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 组件以及三个钩子函数：

1.  定义三个 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;
     }
     }

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

.show{ 
     transition: all 0.4s ease;
     }

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

1.  定义过渡样式：

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

1.  定义 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 = '';
     }
     }
    });

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

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

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

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

## 相关文章 ##

1.  [vue.js 1.x 文档][vue.js 1.x]
2.  [vue.js 2.x 文档][vue.js 2.x]
3.  [String.prototype.padStart(maxLength, fillString)][String.prototype.padStart_maxLength_ fillString]
4.  [js 里面的键盘事件对应的键码][js]
5.  [pagekit/vue-resource][pagekit_vue-resource]
6.  [navicat如何导入sql文件和导出sql文件][navicat_sql_sql]
7.  [贝塞尔在线生成器][Link 1]

本文转自： [www.itheima.com][]

转自网络。如有侵权，请联系删除

[Vue]: https://cn.vuejs.org/v2/guide/transitions.html
[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
[vue.js 1.x]: https://v1-cn.vuejs.org/
[vue.js 2.x]: https://cn.vuejs.org/
[String.prototype.padStart_maxLength_ fillString]: http://www.css88.com/archives/7715
[js]: http://www.cnblogs.com/wuhua1/p/6686237.html
[pagekit_vue-resource]: https://github.com/pagekit/vue-resource
[navicat_sql_sql]: https://jingyan.baidu.com/article/a65957f4976aad24e67f9b9b.html
[Link 1]: http://cubic-bezier.com/#.4,-0.3,1,.33
[www.itheima.com]: http://www.itheima.com