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

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

⭐注意事项：

<transition> 组件可以包裹单个元素或组件，当内部元素或组件的状态发生变化时（如通过 v-if 或 v-show 控制显示隐藏），<transition> 会自动检测并添加过渡效果。
<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、看下效果

5、再来一个过渡动画

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 【离场动画的时间段】 */