DEMO | 小程序实现三种TabBar创意动画

DEMO

概述

小程序日益增多的情况下，UI风格显得越来越重要，在页面中如果能让TabBar个性化一点，加一些小交互，用户体验会大大提升。由于小程序对svg不太友好，所以我们尽量使用css动画进行实现。

第一种：文字默认隐藏并缩小效果

这种效果主要使用了transform和opacity来实现。文字默认隐藏并缩小，点击后icon图标transform的y轴方向上移，同时控制文字的opacity。圆形块根据点击的index去动态计算x轴的偏移位置即可。

• 核心CSS代码，详情见源码

.tabbar .item .text{

position: absolute;

width: 100%;

bottom: 10rpx;

text-align: center;

font-size: 22rpx;

opacity: 0;

transition: all .8s;

transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8);

width: 100%;

}

.tabbar .item.active .text{

opacity: 1;

transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1);

}

.tabbar .item.active .icon{

color: #3561f5;

transform: translateY(-55rpx); -webkit-transform: translateY(-55rpx); -moz-transform: translateY(-55rpx); -o-transform: translateY(-55rpx);

}

.tabbar .item .icon{

font-size: 50rpx!important;

text-align: center;

transition: all .8s;

}

第二种：跳跃式切换

这个效果用到一个css动画工具库：bouncejs，它可以在线生成css动画，然后复制到项目中使用即可。下方效果采用跳跃式切换，整体看上去非常有活力。使用了animation动画。由于css动画代码过多，想看完整代码见文末源码包。

第三种：简单跳动切换

下方这个效果还是用bouncejs在线编辑，编辑完成后只需要点击后给相应的元素添加类名即可。

下载链接

链接: 点击“阅读原文”

极乐技术社区