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