安装lodash库
cnpm install lodash -S
安装lodash-type文章来源：https://www.toymoban.com/news/detail-707586.html
cnpm install @types/lodash -D文章来源地址https://www.toymoban.com/news/detail-707586.html
<template>
<div>
<button @click="random">random</button>
<transition-group move-class="mmm" class="wraps" tag="div">
<div class="items" :key="item.in" v-for="item in list">{{ item.number }}</div>
</transition-group>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import _ from "lodash";
let list = ref(
Array.apply(null, { length: 81 } as number[]).map((_, index) => {
return {
in: index,
number: (index % 9) + 1,
};
})
);
const random = () => {
list.value = _.shuffle(list.value);
}
</script>
<style scoped>
.wraps {
display: flex;
flex-wrap: wrap;
width: calc(25px * 10 + 9px);
}
.items {
height: 25px;
width: 25px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.mmm {
transition: all 1s;
}
</style>
到了这里，关于transition-group过渡动画的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
