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%;

        }

      }

    }

  }