用css自定义属性编写标题切换动画效果

本文主要利用了css自定义属性在style上的应用

效果图：

html：

<ul class="archive-data_title" :style='{"--currInx":(currTitle-1)}'>
        <li @click='switchTitle(1)'>基本数据</li>
        <li @click='switchTitle(2)'>计算数据</li>
        <li @click='switchTitle(3)'>皮肤数据</li>
</ul>

css

  @mixin switch_title($w){
        display: flex;
        border-bottom: $border;
        font-size: 0;
        height: 90rpx;
        position: relative;
       &:after{
            content: '';
            display: inline-block;
            position: absolute;
            width: $w;
            height: 90rpx;
            transition: transform .3s;
            transform:translateX(calc(var(--curr-inx)*100%));
            bottom: 0;
            z-index: -1;
            bottom: 0;
            border-bottom: 1px solid #0077CC;
        }
        li{
            width: $w;
            text-align: center;
            height: 90rpx;
            line-height: 90rpx;
            font-size: 28rpx;
        }
    }
    .archive-data_title{
        @include switch_title($w:calc(100% / 3))

    }