Vue3从0到1组件开发-业务组件：步骤的动画

这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

前解

在之前的文章中写过一篇关于steps步骤条组件，但是这个步骤条仅仅只是步骤的推进， 而今天这篇文章想写一些关于步骤条的动画的内容。

效果图如上，当点击对应步骤的时候，色块会移动到对应的位置。相比起原来的效果来说，效果之后，样式的切换不会带来很明显的突兀感，引导用户的视线感受到元素的变化。

在前端愈加成熟的当下，功能已经不是唯一的追求了，更多的PM开始追求更好的用户体验了，所以前端的性能优化、交互设计也愈加的成熟。这一点也是值得我们多多学习，不止进步的鞭策吧。

这个功能的逻辑部分非常简单， 主要是在html+css的部分需要处理。

结构部分

先看结构。

<div class="steps">
    <span class="mask" :style="categoryboxLeft"></span>
    <div class="steps-item" v-for="item in list" :key="item.id" @click="switchStep(index)">
     // content
    </div>
</div>

简单的结构就如上代码所示了。

这里在点击item时，mask移动到对应的位置，一点点小小的计算就能实现，主要还是css的部分处理。

computed:{
    categoryboxLeft() {
	return `calc(((100% - 20upx) / list.length) * ${this.currCategoryIndex} + 20upx)`;
    }
},
methods:{
    switchStep(index){ this.currentCategoryIndex = index; }
}

.mask {
    position: absolute;
    width: calc((100% - 20upx) / 4 - 20upx);
    top: 0;
    left: 20upx;
    height: 100%;
    border-radius: 12rpx;
    background-color: $primary-color;
    color: #fff;
    transition: left 0.2s ease-in;
}

因为是基于Vue开发的，所以在css的移动部分使用了vue的computed属性来处理，而实际上，通过原生的JavaScript函数实现也并非难事。

calcBoxLeft(index){
    document.getElementsByClassName('mask')[0].style.left = `calc(((100% - 20upx) / list.length) * ${this.currCategoryIndex} + 20upx)`;
}

可以看到，原生实现和vue实现没啥区别。

此外，需要注意的是，因为css中，position的非static属性时，设置的z-index仅比较同级的，否则写在后面的dom会压在前面dom的上面。

那么在这个动画中，就不能设置item的默认背景。