TransX是一个小巧精致的vue组件切换动画库
TNTWeb——全称是腾讯新闻前端团队。群里的小伙伴在Web前端、NodeJS开发、UI设计、手机APP等大前端领域都有实践和积累。目前团队主要支持腾讯新闻各项业务的前端开发。除了业务发展，它还积累了一些前端基础设施，以实现业务效率提升和产品创新。团队倡导开源共建，拥有各类技术人才。团队Github地址：https://github.com/tnfe一、简介一、组件库名称：transxgithub地址：github.com/tnfe/transxnpm参考：www.npmjs.com/package/tra...示例地址:codesanbox2.安装npminstalltr??ansxoryarnaddtransx复制代码3.使用
复制代码importTransXfrom"transx";exportdefault{components:{TransX},data(){return{time:0.6,loop:true,autoplay:1000,delay:-1,nextTransition:"fadeIn",prevTransition:"fadeIn",defaultIndex:0}}}4.支持参数说明类型默认值remarktime动画时长number0.6unitsecondloop是否循环booleantrueautoplay是否toautomaticallyloopboolean,numberfalseautoplay单位为毫秒时会赋予默认值1000delayanimationintervalnumber-1default默认情况下，Index显示编号为0的nextTransition的下一个动画。动画类型见下面上一个stringmoveLeftBackprevTransition的动画。对于动画类型，请参见下面的stringmoveRightBack。当最后一页继续往下翻的时候翻过来调用：function(isEnd){console.log('边界到了',isEnd);}复制代码**说明：边界翻到第一页时isEnd为false，边界翻到最后一页时isEnd为true，transitionend-动画结束时的回调，动画结束后调用，参数为当前索引，值从0开始}复制代码5.支持APIgoto-跳转到页面，参数为页码标识，索引从0开始this.$refs.transx.goto(3);//跳转到第四页并复制代码prev-跳转到上一页//不传递参数this.$refs.transx.prev();//传递参数this.$refs.transx.prev({time:0.6,delay:-1,transition:"moveLeftQuart",//参考下面【支持的动画类型】});copycodenext-跳转到下一页//不传递参数this.$refs.transx.next();//传参this.$refs.transx.next({time:0.6,delay:-1,transition:"moveLeftQuart",//参考下面【支持的动画类型】});复制代码6.支持的动画类型目前支持共有24种动画，选择哪种动画类型，可以参考示例codesanbox，多尝试，说不定会有惊喜这里举几个例子给大家看看：fadeInflipshuttleRightzoomRotateIn7.说明目前只支持Vue2，以后会升级Vue3。如果您在使用过程中遇到任何问题，可以随时提交issue，issue可以定向到8.TNTWeb团队-腾讯新闻前端团队，TNTWeb致力于行业前沿技术的探索和团队成员个人能力的提升。针对前端开发者，我们整理了最新的小程序和web前端技术的优质内容，每周更新?，欢迎star，github地址：https://github.com/tnfe/TNT-每周
