VUE中的平移过渡如何实现？

Question

https://jsfiddle.net/7Lypucvo...

请问用vue的<transition>可以实现底下的横杠平移过渡吗？

我看了下官方文档，好像只能添加进入离开过渡？

Answer 1

可以的.
首先分析动画
动画有两个方向,向左向右.这个可以监视选中的index,通过比较新旧值来获得.
用transition组件实现的话,transition组件触发的前提是v-show,v-if导致了dom的显隐.那么我们就需要4个边框元素来切换显隐触发transition.
DEMO

不用transition组件也可以实现
我们可以用每个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%;
        }
      }
    }
  }