vue之过渡或动画

最新推荐文章于 2025-02-26 15:18:34 发布

千霜

最新推荐文章于 2025-02-26 15:18:34 发布

阅读量225

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue 过渡动画

本文链接：https://blog.youkuaiyun.com/jdbdh/article/details/90521097

前端专栏收录该内容

40 篇文章

订阅专栏

博客介绍了Vue简化过渡和动画的使用，在条件渲染、条件显示、动态组件等环境中，可用内置组件包裹加指定class实现动画效果。还阐述了组件或元素出现和消失过程的生命周期及对应样式类，以及动画设置的要点。

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

介绍

vue简化了过渡和动画的使用，在以下环境中，可使用内置组件transition包裹加上指定class，以提供动画效果：

条件渲染v-if
条件显示v-show
动态组件

例子：过渡

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

生命周期

组件或元素有出现(Enter)和消失(Leave)两个过程，每个过程都有三个类来style这个过程，如下图所示：
在这里插入图片描述
可以看出，v-enter-active和v-leave-acitve作用于过渡或动画的整个过程，因此通常在此添加transition或animation样式。其他的class做作用于过程开始或结束的时候，用于添加不同时刻的样式。

在使用时，为了与某个transition组件联系起来，需要将上面类的v前缀替换为transition组件的name属性

例子：动画

<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>

new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})

.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);
  }
}