TransX 一个小巧玲珑的 vue 组件切换动画库

TNTWeb - 全称腾讯新闻前端团队，组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。

目前团队主要支持腾讯新闻各业务的前端开发，业务开发之余也积累沉淀了一些前端基础设施，赋能业务提效和产品创新。

团队倡导开源共建，拥有各种技术大牛，团队Github地址：https://github.com/tnfe

一、介绍

• 先奉上组件库的名称：transx
• github地址：github.com/tnfe/transx
• npm参考: www.npmjs.com/package/tra…
• 示例地址：codesanbox

二、安装

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 class="comp" 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
    }
  }
}
复制代码

四、支持参数

参数	说明	类型	默认值	备注
time	动画时长	number	0.6	单位秒
loop	是否循环展现	boolean	true
autoplay	是否自动循环	boolean, number	false	autoplay传递为true时，会赋予默认值1000，单位毫秒
delay	动画间隔	number	-1
defaultIndex	默认显示第几张	number	0
nextTransition	下一个的动画，动画种类见下方	string	moveLeftBack
prevTransition	上一个的动画，动画种类见下方	string	moveRightBack

四、支持事件

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

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

** 说明：当边界为翻到第一页时isEnd为false，当边界为翻到最后一页时isEnd为true，

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

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

五、支持API

• 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", // 参考下面[支持动画种类]
    });
复制代码

六、支持的动画类型

目前共支持24种动画类型，具体选择哪种动画类型，可以参考例子codesanbox,多试试，说不定有意外惊喜哦。下面放几个例子给大家看看：

• fadeIn

• flip

• shuttleRight

• zoomRotateIn

七、说明

• 目前只支持Vue2，后续会升级支持Vue3，
• 在使用过程中如果遇到什么问题，可以随时提交issue，issue直达

八、团队

TNTWeb - 腾讯新闻前端团队，TNTWeb致力于行业前沿技术探索和团队成员个人能力提升。为前端开发人员整理出了小程序以及web前端技术领域的最新优质内容，每周更新✨，欢迎star，github地址：https://github.com/tnfe/TNT-Weekly