Vue过渡动画，组件动画，元素动画（vue2元素、组件过渡动画）

ゝ一纸荒年。 2024-04-22 22:30 39阅读 0赞

#### **简介：Vue的过渡动画允许你定义一个进入和离开的过渡，然后在元素的状态改变时自动应用这些过渡，提升用户体验。它通过 <transition> 标签 这个内置组件，在元素或组件的插入、更新和移除时应用过渡效果（也就是动画），可以通过 CSS 过渡或动画类来实现这些效果。这里来简单记录一下。** ####

####  ####

#### ⭐注意事项： ####

1.  #### **<transition> 组件可以包裹单个元素或组件，当内部元素或组件的状态发生变化时（如通过 v-if 或 v-show 控制显示隐藏），<transition> 会自动检测并添加过渡效果。** ####
2.  #### **<transition> 组件需要与 CSS 结合使用来实现过渡效果，并且需要定义一系列 CSS 类来控制过渡的不同阶段；Vue 会根据元素或组件的状态自动添加或移除这些类。** ####

#### ⭐基本用法 ####

#### 1、包裹需要过渡的元素或组件 ####

//使用 <transition> 组件包裹你想要添加过渡效果的元素或组件。
    <transition name="fade" appear="true">  
      <div class="test_box" v-if="domFlag">Hello, about!</div>  
    </transition>
    
    appear="true"
    //表示页面首次加载时就触发
    
    //盒子样式
    .test_box {
      width: 600px;
      height: 400px;
      line-height: 400px;
      border-radius: 6px;
      margin: 100px auto;
      background-color: plum;
    }

#### 2、过渡动画的相关属性介绍 ####

#### 在 CSS 中，你需要定义以 name 属性值为前缀的六个类名来控制过渡的不同阶段。例如，如果 name="fade"，则需要定义以下类： ####

*  .fade-enter-active： 定义进入过渡的持续时间、缓动函数等。
 *  .fade-enter-from： 定义进入过渡开始时的样式。 
 *  .fade-enter： 定义进入过渡结束时的样式。
 *  .fade-leave-active： 定义离开过渡的持续时间、缓动函数等。
 *  .fade-leave-from： 定义离开过渡开始时的样式。
 *  .fade-leave-to： 定义离开过渡结束时的样式。

#### 3、定义 CSS 过渡效果 ####

//当然，可以写在一起
    .fade-enter-active,//进入和离开时
    .fade-leave-active {
      transition: all 0.8s ease;
    }
    //进入之前和离开之后
    .fade-enter,
    .fade-leave-to {
      transform: translateX(200px);
      opacity: 0;
    }

可以看到，这里只用到了4个属性就实现了过渡动画，分别是：

/\* fade-enter-active 【入场动画的时间段】 \*/

/\* fade-leave-active 【离场动画的时间段】 \*/

/\* fade-enter 【进入之前，元素的起始状态】 \*/

/\* fade-leave-to 【动画离开之后，离开的终止状态】 \*/

#### 4、看下效果 ####

![396bb59eba1346f79776d6e8122c9178.gif][]

#### 5、再来一个过渡动画 ####

![72ecc2bd9f1247ee93ca68659ce8c3c1.gif][]

#### 6、过渡动画的样式代码在这 ####

.fade-enter {
      opacity: 0;
      transform: translateX(100%);
    }
    .fade-leave-to {
      opacity: 0;
      transform: translateX(-100%);
    }
    .fade-enter-active {
      transition: all 0.6s linear;
    }
    .fade-leave-active {
      transform: translateX(-100%);
      transform: scale(0.5);
      transition: all 0.4s linear;
    }

可以看到，这里同样也只用到了，4个属性就可以实现过渡动画：

/\* fade-enter 【进入之前，元素的起始状态】 \*/

/\* fade-leave-to 【动画离开之后，离开的终止状态】 \*/

/\* fade-enter-active 【入场动画的时间段】 \*/

/\* fade-leave-active 【离场动画的时间段】 \*/

####  ####

#### 7、最后，来一张过渡动画的可视图 ####

![594f42d1ad944d12a39e5be52d8ada80.png][]

#### 创作不易，感觉有用，就一键三连，感谢(●'◡'●) ####

[396bb59eba1346f79776d6e8122c9178.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/f50f4a23f74947d3bc8341f6961730e1.gif
[72ecc2bd9f1247ee93ca68659ce8c3c1.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/6a61086ec6cd47259a23e25cd3ea9a4c.gif
[594f42d1ad944d12a39e5be52d8ada80.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/f98c92577a804f538fb685110c97b6c4.png