资源分类

npm install transx
or
yarn add transx

<!-- 包裹动画元素 -->
<trans-x
  :time="time"
  :delay="delay"
  :autoplay="autoplay"
  :loop="loop"
  :nextTransition="nextTransition"
  :prevTransition="prevTransition"
  ref="transx"
  @over="over"
  @transitionend="transitionEnd"
>
  <div v-for="(item, index) in items" :key="index" :index="index + 1"></div>
</trans-x>

import TransX from "transx";

export default {
  components: {
    TransX
  },
  data() {
    return {
      time: 0.6,
      loop: true,
      autoplay: 1000,
      delay: -1,
      nextTransition: "fadeIn",
      prevTransition: "fadeIn",
      defaultIndex: 0
    }
  }
}

over - 跳转到了边界后的回调，当在第一页继续上翻和在最后一页继续下翻时调用

  over: function(isEnd) {
    console.log('边界到了', isEnd);
  }

transitionend - 动画结束时的回调，在动画结束后调用，参数为当前的索引，值从0开始

transitionEnd: function(currentIndex) {
    console.log("当前到第几页了: ", currentIndex);
}

goto - 跳转到第几页，参数为页码标识，索引从0开始

this.$refs.transx.goto(3); // 跳转到第四页

prev - 跳转到上一页

    // 不传参
    this.$refs.transx.prev();
    // 传参
    this.$refs.transx.prev({
        time: 0.6,
        delay: -1,
        transition: "moveLeftQuart", // 参考下面[支持动画种类]
    });

next - 跳转到下一页

    // 不传参
    this.$refs.transx.next();
    // 传参
    this.$refs.transx.next({
        time: 0.6,
        delay: -1,
        transition: "moveLeftQuart", // 参考下面[支持动画种类]
    });

fadeIn: 淡入

fadeOut: 淡出

flip: 翻转

moveLeftQuart:

moveRightQuart:

moveLeftBack:

moveRightBack:

zoomOutBack:

zoomInBack:

rotateLeftBack:

rotateRightBack:

rotateLeftTop:

rotateRightTop:

zoomRotateIn:

zoomRotateOut:

shuttleLeft:

shuttleRight:

shuttleDown:

shuttleUp:

rollLeft:

rollRight:

scaleXLeft:

scaleXRight: