Vue animation transition

In Vue, when showing and hiding, creating and removing, an element or a component can be animated through transition.

transition is a component of Vue

• enter(display, create)

• v-enter Before entering (vue3.0 is v-enter-from)

• v-enter-active Entering

• v-enter-to After entering

• leave (hide, remove)

• Before v-leave enters (vue3.0 is v-leave-from)

• v-leave-active entering

• v-leave-to after entering

Vue3 writing method

Requirements: The button controls the display and hiding of a box, and needs to fade in and fade out

   <!-- 需要做动画的部分用transition包裹 -->
<transition> 
    <div v-show="show" class="box"></div>
</transition>

  <button @click="show=true">显示，创建</button>
  <button @click="show=false">隐藏，销毁</button>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const show = ref(true)  //show来控制盒子显示和隐藏
    return { show }
  }
}
</script>

.box{
  width: 200px;
  height: 200px;
  background: pink;
}
// 淡入 从无到有
.v-enter-from{
  opacity: 0;
}
.v-enter-active{
  transition: all 2s ;
}
.v-enter-to{
  opacity: 1;
}
// 淡出 从有到无
.v-leave-from{
  opacity: 1;
}
.v-leave-active{
  transition: all 2s ;
}
.v-leave-to{
  opacity: 0;
}

If you want to use different animations for multiple boxes, you can add a name attribute, and replace v with the value of the name attribute.

  <transition>
    <div v-show="show" class="box"></div>
  </transition>
  <transition name="x">
    <div v-show="show" class="box" style="background-color: orange;"></div>
  </transition>
  <button @click="show=true">显示，创建</button>
  <button @click="show=false">隐藏，销毁</button>

.box{
  width: 200px;
  height: 200px;
  background: pink;
}
// 盒子一 ----------------------------------
// 淡入 从无到有
.v-enter-from{
  opacity: 0;
}
.v-enter-active{
  transition: all 2s ;
}
.v-enter-to{
  opacity: 1;
}
// 淡出 从有到无
.v-leave-from{
  opacity: 1;
}
.v-leave-active{
  transition: all 2s ;
}
.v-leave-to{
  opacity: 0;
}
// 盒子二-------------------------------
// 宽高变化
.x-enter-from{
  height: 0;
  width: 0;
}
.x-enter-active{
  transition: all 1s ;
}
.x-enter-to{
   height: 400px;
   width: 400px;
}
.x-leave-from{
  height: 400px;
   width: 400px;
}
.x-leave-active{
  transition: all 1s ;
}
.x-leave-to{
  height: 0;
  width: 0;
}