TNTWeb – The full name of Tencent news front end team, partners in the group have practiced and accumulated experience in Web front end, NodeJS development, UI design, mobile APP and other large front end fields.

At present, the team mainly supports the front-end development of Tencent news business. Besides business development, some front-end infrastructure has been accumulated to enable business efficiency improvement and product innovation.

The team advocates open source construction, has a variety of technical masters, the team Github address: github.com/tnfe

Introduce a,

  • Here is the name of the component library: Transx
  • Github address: github.com/tnfe/transx
  • NPM reference: www.npmjs.com/package/tra…
  • Example address: codesanbox

Second, the installation

NPM install transx or yarn add transx copy the codeCopy the code

Three, use,

<! <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> Copy codeCopy the code
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}}} Copy the codeCopy the code

4. Supported parameters

parameter instructions type The default value note
time Animation duration number 0.6 Unit s
loop Whether to display in a loop boolean true
autoplay Automatic cycle or not boolean, number false When the autoplay pass is true, a default value of 1000 is given in milliseconds
delay Animation interval number – 1
defaultIndex The default value is displayed number 0
nextTransition For the next animation, see the category below string moveLeftBack
prevTransition For the last animation, see below string moveRightBack

Support events

  • over– Jumps to the callback after the boundary, which is called when the first page continues up and the last page continues down
Over: function(isEnd) {console.log(' boundary to ', isEnd); } Duplicate codeCopy the code

IsEnd is false when the boundary is to turn to the first page and true when the boundary is to turn to the last page.

  • transitionend– End-of-animation callback, called after the animation ends, taking the current index and starting at 0
Function (currentIndex) {console.log(" currentIndex ", currentIndex); } Duplicate codeCopy the code

Support API

  • goto– The parameter indicates the page id, and the index starts from 0
this.$refs.transx.goto(3); // Skip to page 4 to copy the codeCopy the code
  • prev– Jump to previous page
// This.$refs.transx.prev(); $refs.transx.prev({time: 0.6, delay: -1, transition: "moveLeftQuart",}); Copy the codeCopy the code
  • next– Skip to the next page
// This.$refs.transx.next(); $refs.transx.next({time: 0.6, delay: -1, transition: "moveLeftQuart",}); Copy the codeCopy the code

6. Supported animation types

Currently, there are 24 types of animation supported. For specific selection of animation types, you can refer to the example Codesanbox, and try more, maybe there are unexpected surprises. Here are a few examples:

  • fadeIn

  • flip

  • shuttleRight

  • zoomRotateIn

Seven, description,

  • Currently, only Vue2 is supported. In the future, Vue3 will be upgraded.
  • In the process of use, if there is any problem, you can submit the issue at any time, issue direct

Eight, team

TNTWeb – Tencent news front end team, TNTWeb is committed to the exploration of cutting-edge technology in the industry and the improvement of team members’ personal ability. For front-end developers to organize the applets and the latest quality content in the field of web front-end technology, weekly update ✨, welcome star, github address: github.com/tnfe/TNT-We…