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";
}