Vue.js 过渡和动画-CFANZ编程社区

学习目录：

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 绑定了元素的位置，当它们的值变化时，元素会以平移的方式进行动画。