Vue3+TypeScript学习笔记（十八）

transitionGroup和transition很相似，但有以下几点不同：

1. transitionGroup内部可以包含多个平级标签，而transition只能包含一个
2. transitionGroup内的所有标签必须有key，否则Vue将报警告。基于这个特点，我们可以在transitionGroup标签外部再套一个div以实现对标签内元素样式的统一管理（如flex弹性盒子）
3. transitionGroup比transition多了两个props，分别是tag和move-class。transitionGroup默认不会在外层为其中的所有标签生成一个大的容器，如果有需要可以使用tag="<容器名(可以是div、section、p等)>"来生成。move-class用于自定义过渡期间被应用的 CSS class（通常是形如transition: all 1s这样的过渡选项，move-class内部写动画样式将不生效）
4. 其他生命周期钩子、过渡类名规范等和transition相同

动画插入、删除数组中的元素

<template>
    <div class="warp">
        <transition-group
            enter-active-class="animate__animated animate__flip"
            leave-active-class="animate__animated animate__bounceOutDown"
        >
            <div v-for="(item, index) in arr" :key="index">{{ item }}</div>
        </transition-group>
    </div>
    <button @click="add">末尾插入元素</button>
    <button @click="remove">末尾删除元素</button>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import 'animate.css'

let arr = reactive([1, 2, 3, 4, 5, 6, 7])
const add = () => {
    arr.push(arr.length + 1)
}
const remove = () => {
    arr.pop()
}
</script>

<style scoped>
.warp {
    display: flex;
}
.warp div {
    margin: 5px;
    font-size: 20px;
}
</style>

平面过渡动画（帅炸了），需要注意一点：Array.apply(null,{length:81}）和Array(81)略有不同，Array(81)创造的81个元素均为空值，而Array.apply()创造的元素会被统一赋值为undefined,可用于for in循环遍历等操作
平面过渡动画

<template>
    <button @click="change">改变数组顺序</button>
    <div class="wrap">
        <transition-group move-class="mmm">
            <div v-for="(item) in arr" :key="item.id" class="items">{{ item.number }}</div>
        </transition-group>
    </div>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import 'animate.css'
import _ from 'lodash'

// 此方法和Array(81)略有不同——Array(81)创造的81个元素均为空值,此方法创造的元素会被统一赋值为undefined,可用于for in循环等
let arr = ref(Array.apply(null,{length:81} as Array<number>).map((_,index)=>({
    id:index,
    number:index % 9 + 1
})))
console.log(arr)
const change = () => {
    arr.value = _.shuffle(arr.value)
}
</script>

<style scoped>
.wrap{
    display: flex;
    flex-wrap: wrap;

    /* 由于物理像素不同,border所占空间也不同 */
    width: calc(25px * 9 + 18px);
}
.items{
    display: flex;
    width: 25px;
    height: 25px;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    font-size: 22px;
}
.mmm{
    transition: all 1s;
}
</style>

状态过渡：其实就是数据的过渡，借助gsap甚至不需要动画组件标签。gsap.to()方法内部通过修改target（对象名，也可以是真实DOM元素）.property（属性名）的方式来修改脚本中对应的值，不过会额外加上动画效果
状态过渡动画

<template>
    <!-- step表示每次点击↑或↓按钮增减量都是20 -->
    <input v-model="num.current" step="20" type="number">
    <div>
        {{ num.tweenNumber.toFixed(0) }}
    </div>
</template>

<script setup lang='ts'>
import { ref,reactive,watch } from 'vue'
import gsap from 'gsap'

const num = reactive({
    // 当前值(静态)
    current:0,
    // 借由动画变化的值(动态)
    tweenNumber:0
})
// 当current发生变化时newValue随之改变,gsap.to中的tweenNumber将展示过渡效果
watch(()=>num.current,(newValue,oldValue)=>{
    // to的本质就是渐变效果
    gsap.to(num,{
        // 过渡时间1s
        duration:1,
        // 内部num.tweenNumber = newValue,但是添加了过渡效果
        tweenNumber:newValue
    })
})
console.log(parseFloat('123abc'))
</script>

<style scoped>

</style>