学习目录：
- Vue.js 简介
- Vue.js 实例与数据绑定
- Vue.js 计算属性和侦听器
- Vue.js 条件渲染和列表渲染
- Vue.js 事件处理
- Vue.js 表单输入绑定
- Vue.js 组件基础
- Vue.js 组件通信
- Vue.js 插槽
- Vue.js 动态组件和异步组件
- Vue.js 自定义指令
- Vue.js 过渡和动画
- Vue.js 混入
- Vue.js 自定义事件和 v-model
- Vue.js 渲染函数和 JSX
- Vue.js 插件
- Vue.js 单文件组件
- Vue.js Webpack 配置和打包优化
- Vue.js Vue Router
- Vue.js Vuex
- Vue.js 服务端渲染
- Vue.js 代码测试和调试
- Vue.js 生态系统
- Vue.js 最佳实践和性能优化
- Vue.js 应用部署和上线
过渡是指在元素插入、更新或删除时添加动画效果，而动画则是指在元素上添加动画效果，例如旋转、缩放或平移。这篇文章将介绍如何在 Vue.js 中使用过渡和动画。
过渡
过渡是指在元素插入、更新或删除时添加动画效果。Vue.js 中的过渡可以通过以下两种方式实现：
CSS 过渡
CSS 过渡是指通过 CSS 过渡类来实现过渡效果。Vue.js 中的过渡类有以下几种：
v-enter: 进入过渡的开始状态，元素被插入后立即生效，只应用一帧样式。v-enter-active: 进入过渡的结束状态，元素被插入后，过渡中的样式都会应用，直到过渡结束。v-enter-to: 进入过渡的结束状态，与v-enter-active相同，但是在过渡结束之后会被删除。v-leave: 离开过渡的开始状态，元素被删除前立即生效，只应用一帧样式。v-leave-active: 离开过渡的结束状态，元素被删除前，过渡中的样式都会应用，直到过渡结束。v-leave-to: 离开过渡的结束状态，与v-leave-active相同，但是在过渡结束之后会被删除。
在使用 CSS 过渡时，需要在 CSS 中定义这些过渡类，例如：
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}然后，在 Vue.js 模板中使用 transition 元素来包裹需要过渡的元素，例如：
<transition name="fade">
<div v-show="show">Hello, world!</div>
</transition>在上面的例子中，name 属性指定了过渡类的名称。当 v-show 的值为 true 时，元素会以淡入淡出的方式显示和隐藏。
JavaScript 过渡
JavaScript 过渡是指通过 JavaScript 来实现过渡效果。Vue.js 中的 JavaScript 过渡可以使用以下钩子函数：
before-enter: 在元素被插入之前调用。enter: 在元素被插入后调用。after-enter: 在元素被插入并且过渡动画结束后调用。enter-cancelled: 在元素插入过程中，如果禁用了过渡或终止了过渡，则调用。before-leave: 在元素被删除之前调用。leave: 在元素被删除后调用。after-leave: 在元素被删除并且过渡动画结束后调用。leave-cancelled: 在元素删除过程中，如果禁用了过渡或终止了过渡，则调用。
在使用 JavaScript 过渡时，需要在 Vue.js 组件中定义这些钩子函数，例如：
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<div v-show="show">Hello, world!</div>
</transition>然后，在 Vue.js 组件中定义这些钩子函数，例如：
export default {
data() {
return {
show: false,
};
},
methods: {
beforeEnter(el) {
el.style.opacity = 0 el.style.transform = 'translateY(20px)';
},
enter(el, done) {
setTimeout(() => {
el.style.opacity = 1;
el.style.transform = 'translateY(0)';
done();
}, 500);
},
afterEnter(el) {
console.log('afterEnter');
},
enterCancelled(el) {
console.log('enterCancelled');
},
beforeLeave(el) {
console.log('beforeLeave');
},
leave(el, done) {
setTimeout(() => {
el.style.opacity = 0;
el.style.transform = 'translateY(20px)';
done();
}, 500);
},
afterLeave(el) {
console.log('afterLeave');
},
leaveCancelled(el) {
console.log('leaveCancelled');
},
},
};在上面的例子中，beforeEnter、enter 和 afterEnter 钩子函数用于定义进入过渡的动画，而 beforeLeave、leave 和 afterLeave 钩子函数用于定义离开过渡的动画。enter-cancelled 和 leave-cancelled 钩子函数用于处理过渡被取消的情况。
动画
动画是指在元素上添加动画效果，例如旋转、缩放或平移。Vue.js 中的动画可以通过以下两种方式实现：
CSS 动画
CSS 动画是指通过 CSS 动画来实现动画效果。在 Vue.js 中，可以使用 transition 元素来添加 CSS 动画效果，例如：
<transition name="rotate">
<div :style="{ transform: `rotate(${angle}deg)` }">Hello, world!</div>
</transition>在上面的例子中，name 属性指定了动画类的名称，而 :style 绑定了旋转角度。当 angle 的值变化时，元素会以旋转的方式进行动画。
JavaScript 动画
JavaScript 动画是指通过 JavaScript 来实现动画效果。在 Vue.js 中，可以使用 transition 元素来添加 JavaScript 动画效果，例如：
<transition
@before-enter="beforeEnter"
@enter="enter"
@before-leave="beforeLeave"
@leave="leave"
>
<div :style="{ transform: `translate(${x}px, ${y}px)` }">Hello, world!</div>
</transition>在上面的例子中，beforeEnter 和 beforeLeave 钩子函数用于定义进入和离开动画的初始状态，而 enter 和 leave 钩子函数用于定义进入和离开动画的结束状态。x 和 y 绑定了元素的位置，当它们的值变化时，元素会以平移的方式进行动画。
总结
Vue.js 中的过渡和动画为开发人员提供了丰富的动画效果。过渡可以通过 CSS 或 JavaScript 实现，而动画可以通过 CSS 或 JavaScript 实现。无论使用哪种方式，都需要在 Vue.js 模板或组件中添加适当的元素和钩子函数来实现动画效果。
标签：动画,Vue,元素,js,leave,过渡 From： https://blog.51cto.com/u_16123429/6538297