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

<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 >

效果可扫码体验：