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…