【vue其他相关】用transform属性做个区域（组件）切换的效果

最新推荐文章于 2023-12-21 21:45:00 发布

庞囧

最新推荐文章于 2023-12-21 21:45:00 发布

阅读量532

点赞数 1

分类专栏： # vue其他相关

本文链接：https://blog.csdn.net/pagnzong/article/details/118028632

版权

vue其他相关专栏收录该内容

10 篇文章 2 订阅

订阅专栏

文章目录

效果
代码

效果

在这里插入图片描述
颜色小方块可以是个大组件，比如图表之类的，抛个砖~

代码

用transform属性，能很好的节省性能。

<template>
    <main class="wrap">
        <div class="item" style="transform: translate(-200%, 0%) scale(0.33)" @click="changeShowItemClick(0)"></div>
        <div class="item" style="transform: translate(-100%, 0%) scale(0.33)" @click="changeShowItemClick(1)"></div>
        <div class="item" style="transform: translate(100%, 0%) scale(0.33)" @click="changeShowItemClick(2)"></div>
        <div class="item" style="transform: scale(0.33)" @click="changeShowItemClick(3)"></div>
        <div class="item active" style="transform: translate(-50%, 100%) scale(1)" @click="changeShowItemClick(4)"></div>
    </main>
</template>

<script>

export default {
    name: 'About',
    data() {
        return {
            activeIndex: 4,  // 正在展示的dom下标
            itemNodeList: [] // 所有项的dom
        }
    },
    mounted() {
        this.itemNodeList = document.querySelectorAll('.item')
    },
    methods: {
        changeShowItemClick(index) {
            if (index === this.activeIndex) return

            let activeItem = document.querySelector('.active')
            // 交换active类名
            activeItem.classList.remove('active')
            this.itemNodeList[index].classList.add('active')
            this.activeIndex = index
            // 交换transform属性
			[activeItem.style.transform, this.itemNodeList[index].style.transform] = [this.itemNodeList[index].style.transform, activeItem.style.transform]
        }
    }
}
</script>

<style scoped>
    .wrap {
        width: 100vw;
        height: 100vh;
        position: relative;
    }
    .item {
        position: absolute;
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        transition: all 0.8s;
    }
    /* 里面写一些激活的特征 */
    .active {
        width: 200px;
        height: 200px;
    }
</style>