首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue之transition动画组件

vue之transition动画组件使用解读

2026-01-22 10:04:33 作者：wlqMore

Vue.js中transition组件的基本用法和语法,包括常见的6个class切换,以及与动画插件（如animate.css、Velocity.js）的组合使用方法,文章还提到在处理多个元素、组件的过渡和列表的进入/离开过渡时需要注意的细节

前言

往往一些简单动画会在页面视觉体验起到画龙点睛的作用

了解trasition组件的基本使用、语法。

它的实现主要是通过css中的**transition和animation**来实现的

一、transition的组件用法

在业务开发过程中，最常见的还是transition组件的用法

<transition name="slide-fade">
  <p v-if="show"> hello world </p>
</transition>

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
  transform: translateX(10px);
  opacity: 0;
}

除此之外，在进入/离开的过渡中，会有 6 个 class 切换；

v-enter 、v-enter-active 、v-enter-to 、v-leave 、v-leave-active 、v-leave-to。

二、与其他动画插件的组合使用

1. 配合animation实现动画+@keyframes

代码如下（示例）：

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

2. animate.css库

先引入animate.css库

yarn add animate.css

用法参照animate.css中文文档

https://daneden.github.io/animate.css/

可以设置不同的单词出现不同的动画效果

3. JavaScript钩子函数结合Velocity.js

使用Velocity.js之前要先引用

  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (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 })
    }
  }

4. 多个元素、组件的过渡

<div id="example-2">
  <transition name="fade" mode="out-in">
    <button v-if="isEditing" key="save"
            @click="isEditing=!isEditing">
      Save
    </button>
    <button v-else key="edit"
             @click="isEditing=!isEditing">
      Edit
    </button>
  </transition>
</div>

.fade-enter-active, .fade-leave-active {
  transition: all 1s;
}
.fade-enter {
  opacity: 0;
  transform: translateX(50px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-50px);
}

#example-2{
  position: relative;
  padding: 100px;
}
#example-2 button {
  position: absolute;
}

5. 列表的进入/离开过渡

  <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>

注意：在遍历循环的过程中，必须添加key值，否则会导致动画失效。

总结

vue的transition组件结合animation动画，基本上可以满足日常的开发需求。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。