transition+lodash实现炫酷样式

最新推荐文章于 2024-11-03 16:40:52 发布

五分钱嘀Love

最新推荐文章于 2024-11-03 16:40:52 发布

阅读量54

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/nickelLove/article/details/130381924

版权

该文章展示了如何在Vue.js应用中利用lodash库的shuffle方法打乱数组元素顺序，并结合transition-group组件创建一个简单的动画效果。代码示例中，点击按钮会随机重排显示1到9的数字方块，方块的过渡效果由CSS定义。

摘要由CSDN通过智能技术生成

先看效果：

实现代码：

<template>
    <div class="">
        <button @click="random">random</button>
        <transition-group move-class="move_sty" class="wraps" tag="div">
            <div class="items" :key="item.id" v-for="item in list">{{ item.number }}</div>
        </transition-group>
    </div>
</template>

<script setup lang='ts'>
import _ from 'lodash'
import { ref } from "vue"

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

</script>

<style lang="less" scoped>
.wraps {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    width: calc(30px * 9);

    .items {
        width: 30px;
        height: 30px;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.move_sty {
    transition: all 1.5s;
}
</style>

备注：其中lodash需要自己安装，地址：https://www.lodashjs.com/docs/lodash.shuffle#_shufflecollection

_.shuffle() 将数组打乱排列