Vue3——Transition TransitionGroup

Vue3 Transition TransitionGroup

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

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

目录

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

1. Transition

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

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

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

基本用法

未命名时

 <button @click="show=!show">Toggle</button>
<Transition>
         <div v-show="show">hello</div>
 </Transition>

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值

例子

<template>
    <div>
        <!-- vue 内置组件Transition -->
        <!-- 基本使用 -->
      <button @click="show=!show">Toggle</button>
      <Transition>
         <div v-show="show">hello</div>
      </Transition>
      <!-- 为过渡效果命名 -->
      <div>
        <button @click="show1=!show1">Toggle Slide+fade</button>
     </div>
      <Transition name='slide-fade'>
         <div v-show="show1">hello</div>
      </Transition>
      <!-- CSS 的 animation -->
      <div>
        <button @click="show2=!show2">Toggle</button>
      </div>
      <Transition name='bounce'>
        <div v-show="show2">Hello 你是谁 在做什么？？</div>
      </Transition>
      <!-- 深层级过渡与显式过渡时长 -->
      <div>
        <button @click="show3=!show3">Toggle</button>
        <!-- appear 使节点在初次渲染时就显示过渡效果 -->
       <Transition name='nest' :duration="550"  appear>
            <div v-show="show3" class="outer" style="width:100%;height:200px;background:lightgray;padding:20px;">
                <div class="inner" style="width:80%;height:120px;background:gray">hello</div>
            </div>
       </Transition>
    
       <!--  -->
       <div>
          <p>Click to cycle througth states：<button @click="show4fun()">Edit</button></p>
       </div>
          <!-- mode="out-in"  等前一个out后再进去 不会出现过渡动画重叠显现-->
       <Transition name="cycle" mode="out-in">
          <div v-if="show4=='1'">AAA</div>
          <div v-else-if="show4=='2'">BBB</div>
          <div v-else>CCC</div>
       </Transition>
      </div>
    </div>
</template>

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

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

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

<template>
    <div>
        <h1>Transition Group</h1>
        <div>
            <button @click="add()">随机添加</button>
            <button @click="reduce()">随机删除</button>
            <transition-group name='list' tag='ul'>
                <li class="list-move" v-for="item in items" :key="item">
                    {{item}}
                </li>
            </transition-group>
         </div>
    </div>
</template> 

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;
    } */

效果图