vue-animation实现方式
最近在自学前端的知识，现在在研究动画，因为项目中用到最多的应该就是动画和自适应了，所以我从简单开始先学习动画部分，下面这篇文章是参考的别人的文章重新整理的，所以我标注了转载，里面的示例我都试过了，都是可行的。
动画的应用场景有很多，例如：组件切换、事件、交互、updated …
注意：记得在自己的html中引入vue.js脚本啊。
1. 过渡类名动画（CSS过渡）
1.html结构
动画哦
2.VM实例
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
isshow: false
},
methods: {
myAnimate() {
this.isshow = !this.isshow;
}
}
});
3.CSS样式
.fade-enter,
.fade-leave-to {
transform: translateX(100px);
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.8s ease;
}注意：html中声明的动画的名字要和CSS中的名字对应。
2. 第三方类实现动画（CSS动画）
1. 引包
2. 定义 transition 及属性
这是一个H3
补充：过渡模式
3. 钩子函数动画（JS动画）
1. 定义 transition 组件以及三个钩子函数
OK
2. 定义三个 methods 钩子方法
所有的钩子都会传入 el 参数 ( element 的缩写) ，除了动画钩子（enter 和 leave），还会传入 done 作为参数，正如你所猜的，它的作用就是告知 Vue 动画结束。你会注意到我们给 CSS 绑定了 false 值，这是为了让组件知道我们将使用 JavaScript 而不是 CSS 。
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;
}
4. 列表动画
1. 定义过渡样式
2. 定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来
{{item}}
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 = '';
}
}
});
列表的排序过渡
v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和
.v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}
相关文章：https://www.cnblogs.com/nzbin/p/6380679.html