tab栏切换实现动画效果

效果如下：

代码仓库地址：https://gitee.com/tang-yican/tab-bar-sliding-demonstration

线上展示地址：https://www.xiaocantongxue.xyz/tab-animation-exchange/

重要的css代码（切换的时候只要把各自的类名添加或者删除掉就好了）：

/* 左边的选中隐藏 */
.gradient-transe-left-hide {display: none;
}/* 右边的选中动画显示 */
.tab-area .gradient-transe-right-show {display: block; animation: animations-for-right-show 0.3s linear forwards;
}
@-webkit-keyframes animations-for-right-show {0% {opacity: 0;transform: translateX(-50%);}100% {transform: translateX(0px);opacity: 1;}
}/* 右边的选中隐藏 */
.gradient-transe-left-hide {display: none;
}/* 左边的选中动画显示 */
.gradient-transe-left-show {display: block;animation: animations-for-left-show 0.3s linear forwards;
}
@-webkit-keyframes animations-for-left-show {0% {opacity: 0;transform: translateX(50%);}100% {opacity: 1;transform: translateX(0rpx);}
}

原生js代码

function clickTabLeftButton() {// 左边字体变粗tabLeftText.className = "tab-left-text selected";// 右边字体变细tabRightText.className = "tab-right-text";// 右选中图片消失tabRightImage.className = "tab-left-image gradient-transe-left-hide";// 左边选中图片从左到右移动、缓慢展示tabLeftImage.className = "tab-left-image gradient-transe-left-show";
}function clickTabRightButton() {// 左边字体变细tabLeftText.className = "tab-left-text";// 右边字体变粗tabRightText.className = "tab-right-text selected";// 左边选中图片消失tabLeftImage.className = "tab-left-image gradient-transe-left-hide";// 右边选中图片从左到右移动、缓慢展示tabRightImage.className = "tab-right-image gradient-transe-right-show";
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！