关于前端: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
    }
  }
}
复制代码 

四、反对参数

四、反对事件

• 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