在vue中同时使用过渡和动画

最新推荐文章于 2025-06-11 11:20:27 发布

哒玲

最新推荐文章于 2025-06-11 11:20:27 发布

阅读量607

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue基础学习文章标签：过渡动画 animate 自定义动画时长

本文链接：https://blog.youkuaiyun.com/zl13015214442/article/details/87907294

vue基础学习专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍如何在Vue中同时使用transition过渡效果和animate.css动画库，实现元素进入时的摆动效果和消失时的抖动效果。通过自定义appear-active-class和设置transition的duration属性，可以精确控制动画的时长和顺序，实现刷新页面时也有动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们先来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>在vue中同时使用过渡和动画</title>
  <link rel="stylesheet" href="./animate.css">
  <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
<div id="root"> 
  <transition
    name="fade"
    enter-active-class="animated swing"  
    leave-active-class="animated shake">
    <div v-show="show">hello world</div>
  </transition>
  <button @click="handleClick">change</button>
</div>
<script>
  var vm=new Vue({
    el:"#root",
    data:{
      show:true
    },
    methods:{
      handleClick:function () {
        this.show=!this.show
      }
    }
  })
</script>
</body>
</html>

可以实现在内容进入的时候左右晃动，消失的时候上下抖动的效果，接下来我们发现一旦刷新页面，这个元素第一次出现的时候并没有出现动画效果，为此可以这样做，自定义一个appear-active-class，让它等于 enter-active-class：

appear-active-class="animated swing"

并再添加一个appear的属性，表示在一开始出现的时候元素会有一个动画效果，为我们自定义的属性，这个属性用了animate库里的swing一个动画：

<transition
    appear
    name="fade"
    enter-active-class="animated swing"
    leave-active-class="animated shake"
    appear-active-class="animated swing"> <!--刷新的时候也有动画效果-->
    <div v-show="show">hello world</div>
  </transition>

这样刷新的时候也就会有动画效果了。现在这个元素上只有animate这个库里的动画效果，相当于@keyframes的动画效果，我们希望结合transition过渡的效果，可以这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>在vue中同时使用过渡和动画</title>
  <link rel="stylesheet" href="./animate.css">
  <script src=".././node_modules/vue/dist/vue.js"></script>
  <style>
    .fade-enter,
    .fade-leave-to {
      opacity: 0;
    }
    .fade-enter-active,
    .fade-leave-active{
      transition: opacity 3s;
    }
  </style>
</head>

<body>
<div id="root"> <!--表示动画的时长以transition过渡效果定义的为准-->
  <transition
    appear
    name="fade"
    enter-active-class="animated swing fade-enter-active"
    leave-active-class="animated shake fade-leave-active"
    appear-active-class="animated swing"> <!--刷新的时候也有动画效果-->
    <div v-show="show">hello world</div>
  </transition>
  <button @click="handleClick">change</button>
</div>
<script>
  var vm=new Vue({
    el:"#root",
    data:{
      show:true
    },
    methods:{
      handleClick:function () {
        this.show=!this.show
      }
    }
  })
</script>
</body>
</html>

这样动画就有一个透明度变化的效果。现在我们很明显的知道transition过渡的效果是3s，那么animate提供的动画效果是几秒呢？打开animate.css源码进行查看，实际上animated定义的动画时长是1s：

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

那么问题来了，最终动画执行的时间是以什么为标准来计算的呢？这个时候无我们可以手动来设置动画执行的时长，我们现在已3s为整个动画执行的时间，可以这么设置：

<transition
    type="transition"
    appear
    name="fade"
    enter-active-class="animated swing fade-enter-active"
    leave-active-class="animated shake fade-leave-active"
    appear-active-class="animated swing"> <!--刷新的时候也有动画效果-->
    <div v-show="show">hello world</div>
  </transition>

表示动画的时长以transition执行的时长为准。除了这样设置，我们还可以自定义总时长：

 <transition
    :duration="5000"
    appear
    name="fade"
    enter-active-class="animated swing fade-enter-active"
    leave-active-class="animated shake fade-leave-active"
    appear-active-class="animated swing"> <!--刷新的时候也有动画效果-->
    <div v-if="show">hello world</div>
  </transition>

表示动画样式5秒后才会被清除掉，而文字3秒就会弹出来。设置的更复杂一些，可以写成，入场动画为5秒，出场动画为8秒：

<transition
    :duration="{enter:5000, leave:8000}"
    appear
    name="fade"
    enter-active-class="animated swing fade-enter-active"
    leave-active-class="animated shake fade-leave-active"
    appear-active-class="animated swing"> <!--刷新的时候也有动画效果-->
    <div v-if="show">hello world</div>
  </transition>