Vue3使用transition组件改变DOM属性的方式小结

<template>
   <div>
      <button @click="flag = !flag">switch</button>
      <!-- 用法1  name属性定义class-->
      <transition name="fade">
        <div v-if="flag" class="box">name属性定义class</div>
      </transition>
    </div>
 </template>
      
<script setup lang='ts'>
    import{ref} from 'vue'

    const flag = ref<boolean>(true)
    
</script>


<style scoped lang="scss">
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .fade-enter-from { // 进入 从XX 开始
    width: 0;
    height: 0;
}
    .fade-enter-active {
        // 过程
        transition: all 1.5s ease;
    }
    .fade-enter-to { // 进入 到 XX 结束
        width: 200px;
        height: 200px;
        transform: scale(1.2); // 放大1.2倍
    }

    .fade-leave-from { // 离开 从XX 开始
        width: 200px;
        height: 200px;
    }
    .fade-leave-active {
        // 过程
        transition: all 1.5s ease;
    }
    .fade-leave-to { // 离开 到 XX 结束
        width: 0;
        height: 0;
    }
</style>

<template>
   <transition 
   enter-from-class="dada-enter-from"
   enter-active-class="dada-enter-active"
   enter-to-class="dada-enter-to"
   leave-from-class="dada-leave-from"
   leave-active-class="dada-leave-active"
   leave-to-class="dada-leave-to">
       <div v-if="flag" class="box">自定义类名</div>
   </transition>
</template>
...
<style scoped lang="scss">
dada-enter-from {
   width: 0;
   height: 0;
}
.dada-enter-active {
   // 过程
   transition: all 1.5s ease;
}
.dada-enter-to { // 进入 到 XX 结束
   width: 200px;
   height: 200px;
   transform: scale(1.2); // 放大1.2倍
}

.dada-leave-from {
   width: 200px;
   height: 200px;
}
.dada-leave-active {
   // 过程
   transition: all 1.5s ease;
}
.dada-leave-to { // 离开 到 XX 结束
   width: 0;
   height: 0;
}
</style>

<transition 
:duration="1000"
enter-active-class="animate__animated animate__flipInX"
leave-active-class="animate__animated animate__fadeOutDown">
        <div v-if="flag" class="box font-12">结合第三方类库 animate.css</div> 
</transition>
      
<script setup lang='ts'>
import 'animate.css'
</script>

<template>
 <transition 
    @before-enter="EnterFrom"
    @enter="EnterActive"
    @after-enter="EnterTo"
    @enter-cancelled="EnterCancel"
    @before-leave="LeaveFrom"
    @leave="LeaveActive"
    @after-leave="LeaveTo"
    @leave-cancelled="LeaveCancel" >
    <div v-if="flag" class="box">8个 生命周期</div> 
</transition>
</template>
<script setup lang='ts'>
    // 进入
    const EnterFrom = (el:Element) => {
        console.log('动画进入之前EnterFrom');
    }
    const EnterActive = (el:Element, done: gsap.Callback) => {
        console.log('进入时 EnterActive');
    }
    const EnterTo = (el:Element) => {
        console.log(el,'动画进入之后 EnterTo');

    }
    const EnterCancel = (el:Element) => {
        console.log(el,'动画进过渡效果 被打断时 EnterCancel');
    }
    
    // 离开
    // el DOM 节点
    const LeaveFrom = (el:Element) => {
        console.log(el, '动画离开之前LeaveFrom');
    }
    const LeaveActive = (el:Element, done:Function) => {
        console.log(el,'离开时 LeaveActive');
        done()
    }
    const LeaveTo = (el:Element) => {
        console.log(el,'动画离开之后 LeaveTo');
    }
    const LeaveCancel = (el:Element) => {
        console.log(el,'动画离开过渡效果 被打断时------');
    }
    


</script>

<template>
   <!-- 列表的移动过度示例 
   技术点： <transition-group> 组件还有一个特殊之处除了进入和离开，transition-group还可以为定位的改变添加动画
         第三方库： lodash  npm install lodash --S  注意在ts 下 还需要安装类型声明文件库 npm i --save-dev @types/lodash
-->
 <div>
    <button @click="random">random</button>
    <transition-group move-class="move" class="wrap" tag="div">
      <div class="item" v-for="item in list" :key="item.id">{{ item.number }}</div>
    </transition-group>
 </div>

</template>
<script setup lang='ts'>
import {ref} from 'vue'
import _ from 'lodash' // 需要安装声明文件 npm i -D @types/lodash

let list = ref(Array.apply(null, {length:81} as number[]).map((_, index) => {
    return {
        id: index,
        number: (index % 9) + 1
    }
}))

console.log(list, 'list');
const random = () => {
    list.value = _.shuffle(list.value)
}
</script>
<style scoped lang="scss">
.wrap {
    display: flex;
    flex-wrap: wrap;
    width: calc(25px * 9 + 9px);
    .item {
        width: 25px;
        height: 25px;
        border: 1px solid #ccc;
        display: flex;
        justify-self: center;
        align-items: center;
    }
}
.move {
    transition: all 1s;
}
</style>

<template>
   <input type="number" step="20" v-model="num.current">
       <div style="font-size: 30px; margin-left: 20px;">{{ num.tweenedNumber.toFixed() }}
       </div>
</template>
<script setup lang='ts'>
import {reactive, watch} from 'vue'
import gsap from 'gsap'

 const num = reactive({
    current: 0,
    tweenedNumber:0
 })

 watch(() => num.current, (newVal) =>{
    gsap.to(num, {
        duration: 1,
        tweenedNumber: newVal
    })
 })
</script>