VUE中的平移過渡如何實(shí)現(xiàn)？

可以的.
首先分析動(dòng)畫
動(dòng)畫有兩個(gè)方向,向左向右.這個(gè)可以監(jiān)視選中的index,通過比較新舊值來獲得.
用transition組件實(shí)現(xiàn)的話,transition組件觸發(fā)的前提是v-show,v-if導(dǎo)致了dom的顯隱.那么我們就需要4個(gè)邊框元素來切換顯隱觸發(fā)transition.
DEMO

不用transition組件也可以實(shí)現(xiàn)
我們可以用每個(gè)item的偽元素通過水平方向的縮放來顯示過渡效果.用transform-origin來控制過渡的方向

控制縮放

.item {
  padding: 20px;
  background-color: #fff;
  position: relative;
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #00f;
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  &.active {
    &:after {
      transform: scaleX(1);
    }
  }
}

  .isLeft {
    .item {
      &:after {
        transform-origin: 0 100%;
      }
      &.active {
        &:after {
          transform-origin: 100% 0;
        }
      }
    }
  }

  .isRight {
    .item {
      &:after {
        transform-origin: 100% 0;
      }
      &.active {
        &:after {
          transform-origin: 0 100%;
        }
      }
    }
  }