一. vue的过渡与动画
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。过渡效果的应用可以通过不同方式实现：
- 在CSS过渡和动画中自动应用class
- 在过渡钩子函数中使用JavaScript直接操作dom
- 配合第三方css动画库：Animate.css 或者第三方javascript动画库：Velocity
上面三种方式其实主要就是两种：一个是利用CSS过渡或者动画，另一个是利用JavaScript钩子函数。
二. 如何应用过渡与动画
下面从进入离开过渡以及列表过渡两大方向，概述vue如何为元素添加过渡效果。
2-1. 单元素/组件进入离开过渡
1. css过渡
vue提供了transition封装组件，在以下情况下为任何单元素以及组件添加进入/离开过渡。
- 条件渲染
v-if/ 条件展示v-show - 动态组件
- 组件根节点
例子如下：
看我显示隐藏!!!
.fade-enter-active {
transition: all 0.5s ease;
}
.fade-leave-active {
transition: all 0.9s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(20px);
}
2. css动画
CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id.
Pellentesque habitant morbi tristique senectus et netus.
3. javascript钩子函数
可以在
methods: {
// ---- 进入中 ------
beforeEnter: function (el) {
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
}
}
4. 过渡的类名
进入/离开过渡的类名
-
v-enter：定义过渡的开始状态。在元素插入之前生效，在元素被插入的下一帧移除 -
v-enter-active：定义过渡生效时候的状态。在整个进入过渡的阶段中应用。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数 -
v-enter-to：定义过渡的结束状态。在元素被插入之后下一帧生效，在过渡/动画完成之后移除。 -
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 -
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用。 -
v-leave-to：定义离开过渡的结束状态。
- 在
name属性，定义过渡的类名；如果没有命名，则使用默认的v-为类名的前缀，例如：v-enter... - 我们还可以自定义过渡的类名：
enter-class,enter-active-class,enter-to-class,leave-class,leave-active-class,leave-to-class。它们的优先级高于普通的类名。
代码如下：
看我！
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
0% {
transform: scale(1);
}
}
5. 同时使用css过渡/动画
使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
6. 过渡持续事件
用 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：
...
...
7. 初始渲染的过渡
使用apear特性设置节点在初始渲染的过渡。与进入和离开一样，可以自定义css类名以及javascript钩子函数。
8. 多个元素/组件 过渡
-
v-if/v-else。
注意事项：当有相同标签名的元素切换时，需要给在
- 多组件过渡，不需要提供
key，只需要使用动态组件。
9. vue 提供的过渡模式
-
in-out：新元素先进行过渡，完成之后当前元素过渡离开。 -
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
2-2 列表过渡
在使用v-for同时渲染整个列表的时候，可以使用
- 以真实元素呈现，默认是
,可以通过tag属性更换其他元素。 -
过渡模式不可用 - 内部元素总是需要提供key属性值
列表的三种过渡模式：
- 列表的进入/离开过渡
- 列表的排序过渡
- 列表的交错过渡
代码汇总如下：
{{ item.msg }}
{{item}}
{{item}}
export default {
name: "listTransition",
data() {
return {
list: [
{ msg: "Bruce Lee" },
{ msg: "Jackie Chan" },
{ msg: "Chuck Norris" },
{ msg: "Jet Li" },
{ msg: "Kung Fury" }
],
items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
nextNum: 10
};
},
computed: {
computedList: function() {
var vm = this;
return this.list.filter(function(item) {
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
});
}
},
methods: {
// 1. 当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
// 2. 推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
// appear 特性设置节点在初始渲染的过渡
// 组件 用于列表进入离开过渡 / 排序过渡（v-move）
// 自定义类名前缀：（1）name属性 （2）move-class/enter-class...属性手动设置
beforeEnter: function(el) {
el.style.opacity = 0;
el.style.height = 0;
},
enter: function(el, done) {
var delay = el.dataset.index * 150;
setTimeout(function() {
Velocity(el, { opacity: 1, height: "1.6em" }, { complete: done });
}, delay);
},
leave: function(el, done) {
var delay = el.dataset.index * 150;
setTimeout(function() {
Velocity(el, { opacity: 0, height: 0 }, { complete: done });
}, delay);
},
// 2. 列表进入-离开过渡
randomIndex: function() {
return Math.floor(Math.random() * this.items.length);
},
add() {
this.items.splice(this.randomIndex(), 0, this.nextNum++);
},
remove() {
this.items.splice(this.randomIndex(), 1);
},
// 3. 列表-排序过渡
Shuffle() {
this.items = _.shuffle(this.items);
}
}
};
/* 2. 进入离开过渡-列表 */
.list-item {
margin-right: 20px;
display: inline-block;
}
.list-enter-active,
.list-leave-active {
transition: all 1s;
}
.list-enter,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}
/* 排序 */
.flip-list-move{
transition: transform 1s;
}