Vue入门之animate过渡动画效果

在Vue.js中使用过渡动画效果可以使页面更加生动、美观、易于交互。本文将介绍Vue中的animate过渡动画效果的完整攻略。

安装必备依赖

在使用Vue过渡动画效果前，我们需要先安装相关依赖：

npm install animate.css

设置组件的过渡动画

组件的过渡动画可以通过Vue提供的过渡类名来实现。在组件中我们需要设置如下类名:

• .v-enter
• .v-leave-to

说明：在Vue 2.1.8之前的版本中，名称分别为.v-enter和.v-leave

定义CSS动画

定义过渡动画的css样式可以通过.v-enter和.v-leave-to来实现。可以使用animate.css等外部样式库或者自己手写css样式。

以下是使用animate.css的示例:

<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
  <!-- 添加 或 删除 元素的元素 -->
</transition>

以上代码中，我们使用了Vue提供的<transition>标签来定义过渡动画。分别使用enter-active-class和leave-active-class属性来设置过渡动画的类名。在这个示例中，我们使用了animate.css中的bounceInLeft和bounceOutRight动画。

以下是自定义css样式的示例:

<transition enter-active-class="my-enter" leave-active-class="my-leave">
  <!-- 添加 或 删除 元素的元素 -->
</transition>

<style>
.my-enter-active,
.my-leave-active {
  transition: all 1s ease;
}
.my-enter,
.my-leave-to {
  opacity: 0;
  transform: translateX(100px);
}
</style>

以上代码中，我们自己定义了my-enter和my-leave-to的css样式。在这个示例中，我们设置了2个过渡状态的css样式，具有透明度为0和X轴平移100像素的动画效果。

组件动画的钩子函数

在Vue中，还有一些可以让我们在动画过程中执行一些自定义的方法的钩子函数。这些钩子函数可以用来在开始过渡或者完成过渡的时候来执行一些自定义逻辑。

下面是一些常用的过渡钩子函数:

• before-enter(el)：在元素被插入之前执行
• enter(el, done)：在元素插入完成之后执行
• after-enter(el)：在元素插入完成之后，过渡动画完成后执行
• enter-cancelled(el)：在动画过程中调用$nextTick取消过渡前执行
• before-leave(el)：在元素被移除之前执行
• leave(el, done)：在元素移除完成之后执行
• after-leave(el)：在元素移除完成之后，过渡动画完成后执行
• leave-cancelled(el)：在动画过程中调用$nextTick取消过渡前执行

以下是一个包含了所有钩子函数示例：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  >
  <!-- 添加 或 删除 元素的元素 -->
</transition>

methods: {
  beforeEnter: function (el) {
    // ...
  },
  enter: function (el, done) {
    // ...
    done();
  },
  afterEnter: function (el) {
    // ...
  },
  beforeLeave: function (el) {
    // ...
  },
  leave: function (el, done) {
    // ...
    done();
  },
  afterLeave: function (el) {
    // ...
  }
}

上述代码中，我们定义了6个方法用于演示所有过渡动画的钩子函数。当动画开始、完成、取消或中止时会调用这些函数。其中done()方法用于标记过渡动画结束。

示例

以下是一个展示过渡动画的完整示例:

<div id="app">
  <button v-on:click="toggle = !toggle">Toggle Element</button>
  <hr>
  <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
    <p v-if="toggle">Hello World!</p>
  </transition>
</div>

<style>
  .bounceInLeft {
    animation-duration: 1s;
    animation-name: bounceInLeft;
  }
  .bounceOutRight {
    animation-duration: 1s;
    animation-name: bounceOutRight;
  }
</style>

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

在这个示例中，我们定义了一个按钮和一个使用过渡动画的段落。点击按钮时，使用v-if指令来切换段落的显示状态。当段落的状态更新时，使用过渡动画来切换段落的显示状态。

另一个自定义的示例：

<div id="app">
  <button v-on:click="toggle = !toggle">Toggle Element</button>
  <hr>
  <transition
    enter-active-class="my-enter-active"
    leave-active-class="my-leave-active"
    mode="out-in"
  >
    <p class="my-container" v-if="toggle">Hello World!</p>
    <p class="my-container" v-else>Goodbye World!</p>
  </transition>
</div>

<style>
  .my-container {
    transition: all 1s ease;
  }
  .my-enter,
  .my-leave-to {
    opacity: 0;
    transform: translateX(100px);
  }
  .my-enter-active,
  .my-leave-active {
    transition: all 1s ease;
  }
  .my-leave,
  .my-enter-to {
    opacity: 0;
    transform: translateX(-100px);
  }
</style>

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

在这个示例中，我们使用按钮切换段落的状态。当段落的状态更改时，使用自定义的css样式来实现过渡动画。这个样例中的过渡模式为out-in，意味着过渡第一个元素出场后再过渡第二个元素入场。

结论

Vue提供了一些非常易于实现过渡动画的方法。我们可以使用animate.css、自定义css样式或者也可以使用Vue提供的钩子函数来自定义过渡动画的逻辑，使我们更容易实现各种丰富生动的过渡动画效果。