css：transition tab切换动态滑动效果

青衫折扇

已于 2023-02-02 15:49:20 修改

阅读量1.7k

点赞数 1

分类专栏： css 文章标签：前端 css Powered by 金山文档

于 2023-01-12 21:00:43 首次发布

本文链接：https://blog.csdn.net/qq_42543264/article/details/128666367

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<template>
    <view class="tabs">
        <view class="item" :class="{'active':active == 1}" @click="active = 1">item1</view>
        <view class="item" :class="{'active':active == 2}" @click="active = 2">item2</view>
        <view class="bgs" :class="{'left1':active == 2}"></view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                active:1
            }
        },
    }
</script>
<style scoped lang="scss">
.tabs{
    width: 500rpx;
    height: 100rpx;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .item{
        text-align: center;
        width: 250rpx;
        height: 100rpx;
        line-height: 100rpx;
        border: 1px solid #26A69A;
        position: relative;
        z-index: 2;
    }
    .active{
        color: #fff;
    }
    .bgs{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 250rpx;
        height: 100rpx;
        background: #26A69A;
        transition: all .5s;
    }
    .left1{
        left: 250rpx;
    }
}
</style >

效果可扫码体验：