Vue3 Transition TransitionGroup

官网地址：https://cn.vuejs.org/guide/built-ins/transition.html

官网讲得很详细 我就只写基本用法了

目录

• Vue3 Transition TransitionGroup
  
  
  
  • 
    
    
    
    • 
      
      
      
      • 
        
        
        
        • 1. Transition
        
        
        • 2. Transition Group
        
        
        
        
      
      
      
      
    
    
    
    
  
  
  
  

1. Transition

会在一个元素或组件进入和离开 DOM 时应用动画

触发条件：v-if 、v-show、特殊元素切换得动态组件

一共有 6 个应用于进入与离开过渡效果的 CSS class。

基本用法

未命名时

Toggle



export default {
data() {
return {
show:true,
}
}
}


.v-enter-active,.v-leave-active{
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to{
opacity: 0;
}


命名：通过name来命名 CSS中得v则改为name值

例子

export default {
data() {
return {
show:true,
show1:true,
show2:true,
show3:true,
show4:"1"
}
},
methods: {
show4fun(){
let flag=this.show4;
if(flag==1){
this.show4=2;
}else if(flag==2){
this.show4=3;
}else{
this.show4=1;
}
}
},
}


.cycle-enter-active,.cycle-leave-active{
transition: all 0.5s;
}
.cycle-enter-from,.cycle-leave-to{
transform: translateY(-20px);
opacity: 0;
}
.cycle-enter-to,.cycle-leave-from{
transition: all 0.5s;
}
.v-enter-active,.v-leave-active{
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to{
opacity: 0;
}
.slide-fade-enter-active{
transition: all 0.3s ease-out;
}
.slide-fade-leave-active{
transition: all 0.8s cubic-bezier(1,0.5,0.8,1);
}
.slide-fade-enter-from,
.slide-fade-leave-to{
transition: all 0.3s ease-out;
}
.bounce-enter-active{
animation:bouncekey 0.5s;
}
.bounce-leave-active{
animation:bouncekey 0.5 reverse;
}
@keyframes bouncekey{
0%{
transform: scale(0);
}
50%{
transform: scale(1.25);
}
100%{
transform: scale(1);
}
}
/* inner */
.nest-enter-active .inner,
.nest-leave-active .inner{
transition: all 0.3s ease-in-out;
}
.nest-enter-from .inner,
.nest-leave-to .inner{
transform: translateX(30px);
opacity: 0;
}
.nest-enter-active .inner{
transition-delay: 0.25s;
}
/* outer 不生效 why???? */
.nest-enter-active .outer,
.nest-leave-active .outer{
transition: all 0.3s ease-in-out;
}
.nest-enter-from .outer,
.nest-leave-to .outer{
transform: translateX(30px);
opacity: 0;
}
.nest-enter-active .outer{
transition-delay: 0.25s;
}


mode属性 值：out-in / in-out 防止动画得进出同时出现，等前一个动画out/in后，后一个动画才in/out

appear 设置元素初次渲染时就执行动画

2. Transition Group

会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画

写一个例子 看完例子就知道基本的使用了

export default {
data() {
return {
items:[
1,2,3,4,16,23,76,90
]
}
},
methods: {
add(){
let num=Math.ceil(Math.random(0)*100);
let len=this.items.length-1;
let index=parseInt(Math.random()*(len+1-0))+0;
this.items.splice(index,0,num);
},
reduce(){
let len=this.items.length-1;
let num=parseInt(Math.random()*(len+1-0))+0;
console.log(num);
this.items.splice(num,1);
// delete this.items[num];
}
},
}


.list-move,.list-enter-active,.list-leave-active{
transition: all 0.5s ease;
}
.list-enter-from,.list-leave-to{
opacity: 0;
transform: translateX(30px);
}
/* 确保将离开的元素从布局流中删除
以便能够正确地计算移动的动画。 */
/* .list-leave-active {
position: absolute;
} */


效果图