Vue动画组件详解

发布时间：2023-05-20

一、基本动画

1、Vue动画组件是Vue.js自带的动画库，为页面中的元素添加类名达到动态效果。可以使用 transition 或者 animation 标签包裹需要添加动画的元素。 2、transition 标签需要定义 name 属性，在CSS中定义进入动画和离开动画的类名，Vue.js会根据定义的类名和Vue生命周期函数给需要添加动画的元素添加类名。如下所示：

/*CSS样式*/
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

<!--Vue组件-->
<transition name="fade">
  <!--name属性指定动画名称-->
  <p v-if="show">Vue动画组件</p>
  <!--v-if指定动态生成元素的条件-->
</transition>

3、animation 标签需要定义 animation 属性，在CSS中定义动画的 keyframe，Vue.js会根据定义的 keyframe 和 duration、timing-function、delay 属性值给需要添加动画的元素添加类名。如下所示：

/*CSS样式*/
.slide-fade-enter, .slide-fade-leave-active {
  animation: slide-fade .5s ease-in-out;
}
@keyframes slide-fade {
  from {
    opacity:0;
    transform: translateY(10%);
  }
  to {
    opacity:1;
    transform: translateY(0);
  }
}

<!--Vue组件-->
<transition name="slide-fade">
  <!--name属性指定动画名称-->
  <p v-if="show">Vue动画组件</p>
  <!--v-if指定动态生成元素的条件-->
</transition>

二、动画模式

1、Vue动画组件支持四种动画模式，可以通过 appear、mode 属性控制：

  • a) transition 模式：只对添加/删除的元素进行动画过渡。
  • b) animation 模式：添加/删除的元素和外层包裹元素都进行动画过渡。
  • c) in-out 模式：新元素先进行进入动画，完成后旧元素进行离开动画。
  • d) out-in 模式：旧元素先进行离开动画，完成后新元素进行进入动画。 2、appear 属性：可以指定元素是否在初始渲染时进行动画。 3、下面的示例演示了 in-out 模式的动画效果：
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

<!--Vue组件-->
<transition name="fade" mode="in-out">
  <!--指定进入和离开的模式-->
  <button @click="show = !show">切换元素</button>
  <p v-if="show">Vue动画组件</p>
</transition>

三、多个元素动画

1、Vue动画组件支持对多个元素同时进行动画效果，使用 <transition-group> 标签包裹多个元素。需要指定 name 属性和 tag 属性。 2、下面的示例演示了多个元素同时进行动画的效果：

/*CSS样式*/
.list-enter-active, .list-leave-active {
  transition: all .5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

<!--Vue组件-->
<ul>
  <transition-group name="list" tag="ul">
    <!--指定tag属性-->
    <li v-for="(item, index) in list" :key="item.id">
      {{ item.text }}
      <button @click="deleteItem(index)">删除</button>
    </li>
  </transition-group>
</ul>

四、JavaScript钩子函数

1、Vue动画组件支持JavaScript钩子函数，在动画过程中JavaScript代码也可以参与到动画效果中。 2、下面的示例演示了JavaScript钩子函数：

/*CSS样式*/
.slide-enter-active {
  /*transition:all .5s;*/
  /*动画效果已经由JS钩子函数实现，可以把原有的transition删除*/
}
.slide-enter, .slide-leave-to { 
  transform: translateX(100%);
  opacity: 0;
}

// JS代码
methods: {
  beforeEnter: function(el) {
    el.style.opacity = 0;
    el.style.transform = "translateX(100%)";
  },
  enter: function(el, done) {
    // done函数在动画完成后调用
    Velocity(el, { opacity: 1, translateX: "0" }, { duration: 500, complete: done });
  },
  leave: function(el, done) { 
    Velocity(el, { opacity: 0, translateX: "-100%" }, { duration: 500, complete: done });
  }
}

<!--Vue组件-->
<transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
  <p v-if="show">Vue动画组件</p>
</transition>

五、组合动画

1、Vue动画组件支持不同动画效果的组合使用。 2、下面的示例演示了组合动画的效果：

/*CSS样式*/
.hover-enter-active, .hover-leave-active {
  transition: all .5s;
}
.hover-enter, .hover-leave-to { 
  opacity: 0;
  transform: translateY(30px);
}

// JS代码
methods: {
  beforeEnter: function(el) {
    el.style.opacity = 0;
    el.style.transform = "translateY(30px) rotateX(-90deg)";
  },
  enter: function(el, done) {
    // done函数在动画完成后调用
    Velocity(el, { opacity: 1, transform: "translateY(0) rotateX(0)" }, { duration: 500, complete: done });
  },
  leave: function(el, done) { 
    Velocity(el, { opacity: 0, transform: "translateY(30px) rotateX(90deg)" }, { duration: 500, complete: done });
  }
}

<!--Vue组件-->
<transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
  <p v-if="show" class="hover">Vue动画组件</p>
</transition>

六、总结

本文详细阐述了Vue动画组件的基本用法、动画模式、多个元素动画、JavaScript钩子函数和组合动画。通过本文的阐述，相信大家已经对Vue动画组件的使用有了更深的了解。

推荐文章