按钮切换动画

<div class="btn-wrapper">
  <div class="slider"
    :class="{
       'to-left':currentChoose === 'latest',
       'to-right':currentChoose === 'hottest'
     }"></div>
 <ul class="btn-list">
   <li class="btn-item"
     @click="currentChoose = 'latest'"
     :class="{active: currentChoose === 'latest', android: !isIOS()}">最新</li>
   <li class="btn-item"
     @click="currentChoose = 'hottest'"
     :class="{active: currentChoose === 'hottest', android: !isIOS()}">最热</li>
 </ul>
</div>
<script>
import scroll from '@/components/scroll'
import tabScrollable from '../components/tabScrollable'
import newsBox from '../components/newsBox'
import liveBox from '../components/liveBox'
import openClassBox from '../components/openClassBox'
import videoBox from '../components/videoBox'
import pdfBox from '../components/pdfBox'
import previewVideo from '../components/previewVideo'
import noData from '@/views/components/noData'
export default {
  name: 'milkList',
  components: {
    scroll,
    tabScrollable,
    newsBox,
    liveBox,
    openClassBox,
    videoBox,
    pdfBox,
    previewVideo,
    noData
  },
  data () {
    return {
      // 最新最热文章相关
      currentChoose: 'latest'
    }
  }
}
</script>
<style lang="stylus" scoped>
    .btn-wrapper
      width 93px
      height 36px
      background #EAEAEA
      border-radius 18px
      position relative
      .slider
        width 48px
        height 36px
        background #FFC700
        color #000000
        border-radius 18px
        position absolute
        top 50%
        left 0
        transform translate(0, -50%)
        &.to-left
          left 0px
          transition left 0.5s
        &.to-right
          left 45px
          transition left 0.5s
      .btn-list
        width 93px
        height 36px
        border-radius 18px
        display flex
        align-items center
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)
        z-index 5
        .btn-item
          width 45px
          height 36px
          line-height 18px
          text-align center
          padded_box(border-box, 9px 0)
          font-size: 13px;
          font-family: 'PingFangSC-Regular', 'PingFang SC';
          color: #878B8D;
          &.android
            padding-top 11px
          &.active
            width 48px
            color #000000
            transition color 0.5s
</style>

效果图：

image.png