Transition组件

在vue中，显示隐藏或者创建移除一个元素或者一个组件的时候，可以通过transition实现动画。

• 进入（显示，创建）
  • v-enter 进入前 （vue3.0 v-enter-from）
  • v-enter-active 进入中
  • v-enter-to 进入后
• 离开（隐藏，移除）
  • v-leave 进入前 （vue3.0 v-leave-from）
  • v-leave-active 进入中
  • v-leave-to 进入后

多个transition使用不同动画，可以添加nam属性，name属性的值替换v即可。

下面是有一个Vue3的例子，可以供大家学习参考

<template>
  <div class="page-home">  
     <button @click="show=true">显示</button>
      <button @click="show=false">隐藏</button>
       <Transition name="fade">
      <div v-show="show" style="width:100px;height:100px;background:red"></div>
    </Transition>
  </div>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'PageHome',
  setup(){
    const show=ref(true);
    return {show}
  }
}
</script>
<style  lang="less">
.fade-enter-from{
  opacity: 0;
}
.fade-enter-active{
  transition: all 2s;
}
.fade-enter-to{
  opacity: 1;
}
.fade-leave-from{
  opacity: 1;
}
.fade-leave-active{
  transition: all 2s;
}
.fade-leave-to{
  opacity: 0;
}
</style>

效果是点击显示和隐藏都会有一个2秒的过渡效果