关于前端: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 transxoryarn 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); // 跳转到第四页复制代码

    // 不传参    this.$refs.transx.prev();    // 传参    this.$refs.transx.prev({        time: 0.6,        delay: -1,        transition: "moveLeftQuart", // 参考上面[反对动画品种]    });复制代码

    // 不传参    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