transtion-group过渡列表，移动过渡列表，状态过渡

1、过渡列表

<template>
	<div class="home_main">
		<button @click="increaseFun">增加</button>
		<button @click="reduceFun">减少</button>
		<div class="content">
			<transition-group leave-active-class="animate__animated animate__hinge"
				enter-active-class="animate__animated animate__jackInTheBox">
				<div class="box" v-for="(item, index) in dataList" :key="index">
					{{ item }}
				</div>
			</transition-group>
		</div>

	</div>
</template>

<script lang="ts" setup>
import Login from "../../components/login.vue"
import { ref, reactive } from "vue"
import 'animate.css';
const dataList = reactive<number[]>([1, 2, 3, 4, 5, 6])
const increaseFun = () => {
	dataList.push(dataList.length + 1)
}
const reduceFun = () => {
	dataList.pop()
}
</script>

<style lang="scss">
.home_main {
	width: 100%;
	height: 100vh;
	background: green;
	font-size: 18px;

	.content {
		display: flex;
		flex-wrap: wrap;
		word-break: break-all;
		box-sizing: border-box;
		padding: 10px 0;
		border: 1px solid red;

		.box {
			font-size: 40px;
			margin: 10px;
		}
	}

	.ap_from {
		width: 0;
		height: 0;
		transform: rotate(360deg);
	}

	.ap_active {
		transition: all 1.5s ease;
	}

	.ap_to {
		width: 200px;
		height: 200px;
	}

	.el-from {
		width: 0;
		height: 0;
		transform: rotate(360deg);
	}

	.fade-enter-active {
		transition: all 1.5s ease;
	}

	.fade-enter-to {
		width: 200px;
		height: 200px;
	}

	.el-from {
		width: 200px;
		height: 200px;
		transform: rotate(-360deg);
	}

	.fade-leave-active {
		transition: all 5s ease;
	}

	.fade-leave-to {
		width: 0;
		height: 0;
	}
}
</style>

2、列表的移动过渡

npm install lodash -S
npm install @types/lodash -D   

<template>
	<div class="home_main">
		<button @click="randomFun">随机</button>
		<transition-group move-class="move_info" tag="div" class="content">
			<div class="box" v-for="item in dataList" :key="item.id">
				{{ item.index }}
			</div>
		</transition-group>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import _ from 'lodash'
import 'animate.css';
const dataList = ref(Array.apply(null, { length: 81 } as number[]).map((_, index) => {
	return {
		id: index,
		index: (index % 9) + 1
	}
}))
console.log(dataList)
const randomFun = () => {
	dataList.value = _.shuffle(dataList.value)
}
</script>

<style lang="scss">
.home_main {
	width: 100%;
	height: 100vh;
	background: green;
	font-size: 18px;

	.move_info {
		transition: all 1s;
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		width: calc(50px * 10 + 9px);
		box-sizing: border-box;
		padding: 10px 19px;
		border: 1px solid red;
		margin: 30px auto;
		box-sizing: border-box;

		.box {
			font-size: 50px;
			height: 50px;
			width: 50px;
			border: 1px solid #ddd;
		}
	}

	.ap_from {
		width: 0;
		height: 0;
		transform: rotate(360deg);
	}

	.ap_active {
		transition: all 1.5s ease;
	}

	.ap_to {
		width: 200px;
		height: 200px;
	}

	.el-from {
		width: 0;
		height: 0;
		transform: rotate(360deg);
	}

	.fade-enter-active {
		transition: all 1.5s ease;
	}

	.fade-enter-to {
		width: 200px;
		height: 200px;
	}

	.el-from {
		width: 200px;
		height: 200px;
		transform: rotate(-360deg);
	}

	.fade-leave-active {
		transition: all 5s ease;
	}

	.fade-leave-to {
		width: 0;
		height: 0;
	}
}
</style>

3、状态过渡

<template>
    <div class="transtion_main">
        <input v-model="inputNum.currentValue" step="20" type="number">
        {{ inputNum.changeNumber.toFixed(0) }}
    </div>
</template>

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

const inputNum = reactive({
    currentValue: 0,
    changeNumber: 0
})
watch(() => inputNum.currentValue, (newValue, oldValue) => {
    gsap.to(inputNum, {
        duration: 10,
        changeNumber: newValue
    })
})
</script>

<style scoped lang="scss">
.transtion_main {
    font-size: 50px;

    input {
        height: 70px;
        width: 300px;
        display: block;
        font-size: 50px;
    }
}
</style>

也就是数字在一直变化累加到20000的这样一个过渡效果