This is the 28th day of my participation in the August Challenge

The former solution

I wrote about the Steps bar component in a previous article, but this bar is just a progression of the step, and this article wants to write about the animation of the step bar.

As shown above, when clicking on the corresponding step, the color block will move to the corresponding position. Compared to the original effect, after the effect, the style switch will not bring a very obvious sense of obtrusive, leading the user’s eye to feel the change of elements.

As the front-end becomes more and more mature, function is not the only pursuit, and more PMS begin to pursue better user experience, so front-end performance optimization and interaction design are becoming more and more mature. This is also worth us to learn more, more than progress of spur it.

The logical part of this functionality is very simple and is mainly handled in the HTML + CSS part.

The structural part

Let’s look at the structure.

<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>
Copy the code

The simple structure is shown in the code above.

Here, when clicking item, the mask will move to the corresponding position. This can be achieved with a little calculation, which is mainly part of the PROCESSING of CSS.

computed:{
    categoryboxLeft() {
	return `calc(((100% - 20upx) / list.length) * The ${this.currCategoryIndex} + 20upx)`; }},methods: {switchStep(index){ this.currentCategoryIndex = index; }}Copy the code
.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.2 s ease-in;
}
Copy the code

Because it is developed based on Vue, the mobile part of the CSS is handled using Vue’s computed properties, and it is actually not that difficult to implement through native JavaScript functions.

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

As you can see, the native implementation is no different from the VUE implementation.

In the CSS, the z-index of position is set to the same level as that of position. Otherwise, the following DOM will be placed on top of the previous DOM.

So in this animation, you can’t set the default background for item.