Ask a good

Hello, everyone, I am Delai ask, and meet you again, the New Year is about to start, the New Year new atmosphere, I wish you a happy New Year, the Year of the Ox.

Welcome to follow me on Github. The article will be updated and published on Github as soon as possible

This is the blog address, welcome +star

To introduce

  • 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

The installation

npm install transx
or
yarn add transx
Copy the code

use

<! Wrap animation elements -->
<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 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 code

Support 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 the event

  • 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('Border is up', isEnd);
  }
Copy 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
  transitionEnd: function(currentIndex) {
    console.log("What page are we on now?", currentIndex);
  }
Copy the code

Support the API

  • goto– The parameter indicates the page id, and the index starts from 0
    this.$refs.transx.goto(3); // Skip to page 4
Copy the code
  • prev– Jump to previous page
    / / not to participate
    this.$refs.transx.prev();
    / / the refs
    this.$refs.transx.prev({
        time: 0.6.delay: -1.transition: "moveLeftQuart".// See below [supported animation types]
    });
Copy the code
  • next– Skip to the next page
    / / not to participate
    this.$refs.transx.next();
    / / the refs
    this.$refs.transx.next({
        time: 0.6.delay: -1.transition: "moveLeftQuart".// See below [supported animation types]
    });
Copy the code

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

instructions

  • 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

the last

Thank you for reading, and I wish you again a happy New Year and a happy Year of the Ox