Vue js 过渡与动画实战技巧（四）

admin
Vue.js
9小时前
3热度
0评论

在前端开发中，过渡和动画效果能够显著提升用户体验。Vue.js 提供了一套强大且灵活的机制来实现这些效果。本文将详细介绍如何在 Vue 中使用过渡和动画，并通过具体示例帮助你快速上手。

什么是过渡与动画？

过渡和动画是指在元素插入、更新或移除时，通过视觉效果平滑地改变元素的状态。Vue 通过内置的 <transition> 组件和一系列生命周期钩子，使得实现这些效果变得非常简单。

基本用法

<transition> 组件

<transition> 组件是 Vue 中用于包裹需要实现过渡效果的元素或组件。它的基本语法如下：

<transition name="fade">

<div></div>
</transition>

在这个例子中，name 属性用于指定过渡的名称，默认情况下，Vue 会生成一系列带有 v- 前缀的 CSS 类名。例如，v-enter、v-enter-active 等。

示例：淡入淡出效果

让我们通过一个简单的示例来理解如何使用 <transition> 组件实现淡入淡出效果。

<div id="app">
  <button @click="toggleShow">点我</button>
  <transition name="fade">
    <p v-if="show">动画实例</p>
  </transition>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    }
  }
});
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在这个示例中，点击按钮会切换 show 的值，从而控制 <p> 元素的显示和隐藏。<transition> 组件包裹了 <p> 元素，并通过 name="fade" 指定了过渡的名称。CSS 类名 fade-enter-active 和 fade-leave-active 控制了过渡的持续时间和效果，而 fade-enter 和 fade-leave-to 分别定义了进入和离开的初始和最终状态。

过渡的生命周期类名

Vue 在过渡过程中会自动添加和移除一系列类名，这些类名可以帮助我们更精细地控制过渡效果。以下是这些类名及其作用：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。
v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效（与此同时 v-enter 被移除），在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。
v-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效（与此同时 v-leave 被删除），在过渡/动画完成之后移除。

自定义类名

除了默认的类名，我们还可以通过以下属性来自定义类名：

enter-class
enter-active-class
enter-to-class（2.1.8+）
leave-class
leave-active-class
leave-to-class（2.1.8+）

示例：使用自定义类名

<div id="app">
  <button @click="toggleShow">点我</button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
  </transition>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    }
  }
});
</script>

<style>
/* 引入 animate.css */
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css');
</style>

在这个示例中，我们使用了 animate.css 库中的动画效果。通过 enter-active-class 和 leave-active-class 属性，我们指定了进入和离开过渡的动画类名。

JavaScript 钩子

除了使用 CSS 过渡和动画，我们还可以通过 JavaScript 钩子来实现更复杂的过渡效果。这些钩子函数可以在过渡的不同阶段被调用。

示例：使用 JavaScript 钩子

<div id="app">
  <button @click="toggleShow">点我</button>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @enter-cancelled="enterCancelled"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    @leave-cancelled="leaveCancelled"
    :css="false"
  >
    <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>

  </transition>
</div>

<script>
import Velocity from 'velocity-animate';

new Vue({
  el: '#app',
  data: {
    show: false
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
    beforeEnter(el) {
      el.style.opacity = 0;
      el.style.transformOrigin = 'left';
    },
    enter(el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 });
      Velocity(el, { fontSize: '1em' }, { complete: done });
    },
    afterEnter(el) {
      // 进入过渡完成后调用
    },
    enterCancelled(el) {
      // 进入过渡取消时调用
    },
    beforeLeave(el) {
      // 离开过渡开始前调用
    },
    leave(el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 });
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 });
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done });
    },
    afterLeave(el) {
      // 离开过渡完成后调用
    },
    leaveCancelled(el) {
      // 离开过渡取消时调用
    }
  }
});
</script>

在这个示例中，我们使用了 Velocity.js 库来实现复杂的动画效果。通过 @before-enter、@enter、@after-enter 等钩子函数，我们可以在过渡的不同阶段执行自定义的 JavaScript 代码。

初始渲染的过渡

我们可以通过 appear 属性来设置节点在初始渲染时的过渡效果。

示例：初始渲染的过渡

<div id="app">
  <transition appear>

<p>初始渲染的过渡效果</p>
  </transition>
</div>

<script>
new Vue({
  el: '#app'
});
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在这个示例中，appear 属性使得 <p> 元素在初始渲染时也应用了过渡效果。

多个元素的过渡

当需要在同一位置切换多个元素时，可以使用 <transition> 组件。为了避免 Vue 为了效率只替换相同标签内部的内容，我们需要通过 key 属性为每个元素设置唯一的标识。

示例：多个元素的过渡

<div id="app">
  <button @click="isEditing = !isEditing">
    {{ isEditing ? '保存' : '编辑' }}
  </button>

<transition>
    <button v-if="isEditing" key="save">保存</button>
    <button v-else key="edit">编辑</button>
  </transition>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isEditing: false
  }
});
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在这个示例中，点击按钮会切换 isEditing 的值，从而在两个按钮之间进行切换。通过 key 属性，Vue 能够正确地识别和处理这两个按钮的过渡效果。

总结

Vue.js 的过渡和动画功能非常强大，通过 <transition> 组件和一系列生命周期类名，我们可以轻松实现各种复杂的过渡效果。无论是简单的淡入淡出，还是复杂的动画组合，Vue 都能提供灵活的解决方案。希望本文能帮助你在项目中更好地利用这些功能，提升用户体验。