vue-06-过度和动画

最新推荐文章于 2025-08-12 14:37:12 发布

转载最新推荐文章于 2025-08-12 14:37:12 发布 · 109 阅读

文章标签：

本文深入探讨了Vue.js中CSS过渡和动画的实现方法，包括使用v-if和v-show控制元素显示状态，通过自定义CSS类实现过渡效果，以及利用第三方动画库增强视觉体验。文章详细介绍了过渡类名的作用、CSS动画的编写技巧，并展示了如何轻松引入并应用第三方动画库。

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

1, css过度与动画

需要使用 v-if, v-show 来进行

1), 过度类名

v-enter: 进入时触发

v-enter-active: 执行过程中

v-enter-to: 停止时进行

v-leave: 离开时开始时进行的

v-leave:active: 离开执行时

v-leave-to: 离开停止时

<div>
      <p>动画过度</p><br/>
      <button @click="showHide"> 按钮</button>

      <transition name="fade">
        <p v-show="show"> 带动画的过度被隐藏的区域</p>
      </transition>

      <p v-show="show"> 不带动画的过度被隐藏的区域</p>
    </div>

data() {
      return {
        show: true,
        showAdm: true,
        anim: true,
      }
    },
    methods: {
      showHide() {
        this.show = !this.show
      },

需要添加css样式

 .fade-enter-active, .fade-leave-active{
    transition: opacity 2s;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0
  }

  .fade-enter-to, .fade-leave {
    opacity: 1;
  }

2), css动画

 <!--动画-->
    <div>
      <button @click="showHideAdm"> 动画切换</button>
      <transition name="ami">
        <p v-show="showAdm"> 嘿嘿 </p>
      </transition>
    </div>

 showHideAdm() {
        this.showAdm = !this.showAdm
      },

  /*动画*/
  .ami-enter-active {
    animation: bounce-in .5s ease;
  }
  /*使用in的反转动画*/
  .ami-leave-active {
    animation: bounce-in .5s reverse;
  }
  /*进入动画*/
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
  /*!*离开动画*!*/
  /*@keyframes bounce-out {*/
    /*0% {*/
      /*transform: scale(0);*/
    /*}*/
    /*50% {*/
      /*transform: scale(1.5);*/
    /*}*/
    /*100% {*/
      /*transform: scale(1);*/
    /*}*/
  /*}*/

3, 使用第三方动画库

引入第三方css

在index.html中引入

<!--引入第三方css-->
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

 <!--使用第三方库， 将css在index中引入-->
    <div>
      <button @click="animLib">动画库</button>
      <transition
        name="custom-classes-transition"
        enter-active-class="animated flipInX"
        leave-active-class="animated flipOutX">
        <p v-if="anim">第三方动画库使用 </p>
      </transition>
    </div>

animLib() {
        this.anim = !this.anim
      }