Vue的动画和过渡（为一个元素添加进入退出动画）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

网页中在创建、更新和销毁一个DOM的时候可以添加一个动画或者过渡使界面展示效果更加友好美观。下面就是vue动画和过渡实现的方式。

首先看效果图

单个动画

需要把要添加动画或过渡的元素放在transition，并且name属性值要和自定义CSS动画的名称一致

<template>
  <div>
    <button @click="showDiv = !showDiv">点击切换</button>
    <transition name="changeShow" appear>
      <h1 v-show="showDiv">显示面板</h1>
    </transition>
  </div>
</template>
   


<script>
export default {
  data() {
    return {
      showDiv: true,
    };
  },
};
</script>

<style>
h1 {
  background-color: orange;
  padding: 1em;
  height: 5em;
}

.changeShow-enter-active {
  animation: changeShow 0.8s;
}
.changeShow-leave-active {
  animation: changeShow 0.8s reverse;
}
@keyframes changeShow {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

为多个元素添加相同的动画

1.需要将元素都放在transition-group元素标签中，且每个元素都要添加key属性，且值唯一

<template>
  <div>
    <button @click="showDiv = !showDiv">点击切换</button>
    <transition-group name="changeShow" appear>
      <h1 v-show="!showDiv" key="1">你好!</h1>
      <h1 v-show="showDiv" key="2">再见!</h1>
    </transition-group>
  </div>
</template>
   
<script>
export default {
  data() {
    return {
      showDiv: true,
    };
  },
};
</script>

<style>
h1 {
  background-color: orange;
  padding: 1em;
  height: 5em;
}

.changeShow-enter,
.changeShow-leave-to {
  transform: translateX(-100%);
}

.changeShow-enter-active,
.changeShow-leave-active {
  transition: 0.8s linear;
}

.changeShow-enter-to,
.changeShow-leave {
  transform: translateX(0);
}
</style>

总结写法：

1. 准备样式

   • 元素进入的样式

     • v-enter：进入的起点

     • v-enter-active：进入过程中

     • v-enter-to：进入的终点

   • 元素离开的样式：

     • v-leave：离开的起点
     • v-leave-active：离开过程中
     • v-leave-to：离开的终点

2. 使用transition包裹要过渡的元素，并配置name属性：

<transition name="changeShow" appear>
	<h1 v-show="showDiv">显示面板</h1>
</transition>

3. 备注：若有多个元素需要过渡，则需要使用：transition-group且每个元素都要指定key值。