Applet implementationTabBarCreative animation (complete source code at end)

With the increasing number of widgets, UI style is becoming more and more important. If TabBar can personalize the page and add some small interactions, the user experience will be greatly improved. Since the applet is not very svG-friendly, we tried to use CSS animations. If you are interested in the TabBar custom solution mentioned in the previous article applets development Tips, check it out. Here are some of the interaction effects I wrote today, and I’ll share the source code at the end of this article. Remember to like + follow + favorites!

NO.1

This effect is mainly achieved by using transform and opacity. The text is hidden and narrowed by default. After clicking the icon transform, the Y-axis direction of the icon moves up, while controlling the opacity of the text. The circular block can dynamically calculate the offset position of the X axis according to the index click.

  • Core CSS code (complete at the end of the article) :
    .tabbar .item .text{
        position: absolute;
        width: 100%;
        bottom: 10rpx;
        text-align: center;
        font-size: 22rpx;
        opacity: 0;
        transition: all .8s;
        transform: scale(0.8);
        width: 100%;
    }
    .tabbar .item.active .text{
        opacity: 1;
        transform: scale(1);
    }

    .tabbar .item.active .icon{
        color: #3561f5;
        transform: translateY(-55rpx);
    }

    .tabbar .item .icon{
        font-size: 50rpx! important;
        text-align: center;
        transition: all .8s;
    }
Copy the code

NO.2

This effect uses a CSS animation library: Bouncejs, which can generate CSS animations online and then copy them to your project for use. The effect of the lower part of the jump switch, the whole looks very dynamic. Animation is used. Because CSS animation code is too much, want to see the complete code at the end of the github address.

NO.3

Bouncejs is used to edit this effect online. After editing, just click and add the class name to the corresponding element.

At the end

For the source code, go to Github. 👉 focus on front-end 365: share front-end tips and some problems in the development process, welcome to follow + favorites + likes, thank you for your support ~