vue3初体验-transition

transition

包裹组件,在组件在下列情形中添加过渡效果

• v-if
• v-show
• 动态组件
• 组件根节点

如何使用

1. 设置 name

<transition name="fade">
  <div v-if="flag" class="box"></div>
</transition>

//开始过渡
.fade-enter-from{
   background:red;
   width:0px;
   height:0px;
   transform:rotate(360deg)
}
//开始过渡了
.fade-enter-active{
  transition: all 2.5s linear;
}
//过渡完成
.fade-enter-to{
   background:yellow;
   width:200px;
   height:200px;
}
//离开的过渡
.fade-leave-from{
  width:200px;
  height:200px;
  transform:rotate(360deg)
}
//离开中过渡
.fade-leave-active{
  transition: all 1s linear;
}
//离开完成
.fade-leave-to{
  width:0px;
   height:0px;
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

1. 自定义过渡 class 类名

enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class

        

          
        
        
        

          

          AI 代码解读
        
      
      

持续时间

<transition :duration="1000">...</transition>
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

        

          
        
        
        

          

          AI 代码解读
        
      
      

配合 animate.css 使用

npm install animate.css
import 'animate.css'
<transition
  leave-active-class="animate__animated animate__bounceInLeft"
  enter-active-class="animate__animated animate__bounceInRight"
>
<div v-if="flag" class="box"></div>
</transition>

        

          
        
        
        

          

          AI 代码解读
        
      
      

生命周期

@before-enter="beforeEnter" //对应enter-from
@enter="enter"//对应enter-active
@after-enter="afterEnter"//对应enter-to
@enter-cancelled="enterCancelled"//显示过度打断
@before-leave="beforeLeave"//对应leave-from
@leave="leave"//对应enter-active
@after-leave="afterLeave"//对应leave-to
@leave-cancelled="leaveCancelled"//离开过度打断

        

          
        
        
        

          

          AI 代码解读
        
      
      

transition-group

transition-group包裹一堆组件,对包裹的所有组件添加过渡效果