Vue前端开发之自定义动画

在Vue 中，不仅可以实现过渡动画效果，还可以给元素添加自定义的动画，它们两者的区别是，自定义动画中名称为 v-enter-from 样式类别在节点插入 DOM 后不会立即移除，而是在 animationend 事件被触发时才移除;除可以自定义动画外，还可以自定义动画的样式类别名称，接下来分别进行介绍。

自定义动画

transition 组件中的动画效果取决于元素应用哪种CSS 动画规则，前面小节中介绍的过渡动画使用了CSS中的transition 属性，而自定义动画则可以使用animation 属性来完成，接下来通过一个示例来演示自定义动画实现的过程。

实例5-2 制作一个自定义动画

1. 功能描述

在上述示例5-1的基础上，当首次点击按钮时，元素将以自定义动画的形式，先放大1.25倍，再缩小至隐藏，再次点击按钮时，元素将以反向的动画形式显示，同时，按钮文字动态显示元素的状态。

2. 实现代码

在项目components 文件夹的ch5子文件夹中，添加一个名为“CustAnimate”的.vue文件，在文件中加入如清单5-2所示代码。

代码清单5-2 CustAnimate.vue代码

<template>
  <div class="action">
    <div class="act">
      <input type="button" @click="startTrans()" 
		:value="blnShow ? '隐藏动画' : '显示动画'">
    </div>
    <transition name="sc">
      <div class="mytrans" v-if="blnShow"></div>
    </transition>
  </div>
</template>
 
<script>
export default {
  name: "CustAnimate",
  data() {
    return {
      blnShow: true
    };
  },
  methods: {
    startTrans() {
      this.blnShow = !this.blnShow;
    }
  },
};
</script>
<style>
.sc-enter-active {
  animation: myanimate 0.5s;
}

.sc-leave-active {
  animation: myanimate 0.5s reverse;
}

@keyframes myanimate {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

.action .act {
  margin: 10px 0;
}

.action .act input {
  width: 80px;
  height: 32px;
}

.mytrans {
  width: 200px;
  height: 150px;
  background-color: #ccc;
}
</style>

3. 页面效果

保存代码后，页面在Chrome浏览器下执行的页面效果如图5-3所示。

4. 源码分析

在上述示例的代码中，类别样式sc-enter-active和sc-leave-active分别为指定名称的进入动画和离开动画生效时的样式，在sc-enter-active样式中，通过animation属性调用自定义的动画myanimate，而在sc-leave-active样式中，通过反方向的方式来执行动画效果。

Vue 框架可以自动识别元素的动画类型，并设置对应的事件进行监听，如果是过渡动画，则通过transitionend 事件进行监听，如果是自定义动画，则设置 animationend事件来监听;在这种情况之下，如果一个元素既使用了过渡动画，又使用了自定义动画，那么，元素在进行动画效果时，可能会导致一个动画已结束，而另一个动画未完成，为了解决这个问题，可以给动画组件添加一个type属性，指定你需要执行的动画类型，如下代码所示：

<transition name="sc" type="animation">
	<div class="mytrans" v-if="blnShow"></div>
</transition>

在项目开发中，建议不要在动画组件包裹的元素上，添加多个动画，容易出现异常。