<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 { // 進(jìn)入 從XX 開始
    width: 0;
    height: 0;
}
    .fade-enter-active {
        // 過程
        transition: all 1.5s ease;
    }
    .fade-enter-to { // 進(jìn)入 到 XX 結(jié)束
        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 結(jié)束
        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 { // 進(jìn)入 到 XX 結(jié)束
   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 結(jié)束
   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">結(jié)合第三方類庫 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個(gè) 生命周期</div> 
</transition>
</template>
<script setup lang='ts'>
    // 進(jìn)入
    const EnterFrom = (el:Element) => {
        console.log('動(dòng)畫進(jìn)入之前EnterFrom');
    }
    const EnterActive = (el:Element, done: gsap.Callback) => {
        console.log('進(jìn)入時(shí) EnterActive');
    }
    const EnterTo = (el:Element) => {
        console.log(el,'動(dòng)畫進(jìn)入之后 EnterTo');

    }
    const EnterCancel = (el:Element) => {
        console.log(el,'動(dòng)畫進(jìn)過渡效果 被打斷時(shí) EnterCancel');
    }
    
    // 離開
    // el DOM 節(jié)點(diǎn)
    const LeaveFrom = (el:Element) => {
        console.log(el, '動(dòng)畫離開之前LeaveFrom');
    }
    const LeaveActive = (el:Element, done:Function) => {
        console.log(el,'離開時(shí) LeaveActive');
        done()
    }
    const LeaveTo = (el:Element) => {
        console.log(el,'動(dòng)畫離開之后 LeaveTo');
    }
    const LeaveCancel = (el:Element) => {
        console.log(el,'動(dòng)畫離開過渡效果 被打斷時(shí)------');
    }
    


</script>

<template>
   <!-- 列表的移動(dòng)過度示例 
   技術(shù)點(diǎn)： <transition-group> 組件還有一個(gè)特殊之處除了進(jìn)入和離開，transition-group還可以為定位的改變添加動(dòng)畫
         第三方庫： 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>