universal-transition
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

universal-transition npm

Used to create transition animation.

Supported

browser weex miniApp wechatMiniprogram bytedanceMicroApp

Install

$ npm install universal-transition --save

Usage

import transition from 'universal-transition';
 
transition(document.querySelector('#box'), {
  transform: 'translate(10px, 20px) scale(1.5, 1.5) rotate(90deg)',
  opacity: '0.5'
}, {
  timingFunction: 'ease',
  delay: 0,
  duration: 1000
}, function() {
  console.log('animation end');
});

Methods

transition(domNode, styles, options, callback)

Supported

browser weex miniApp wechatMiniprogram icon_miniapp_bytedance

Arguments

Property Type Description Required Default Supported
domNode DOMNode Specified element,mini app does not support,see below for details[mini app instructions] yes - browser weex
styles object See below for details yes -
options Object options,See below for details no -
callback function Triggered after the animation is complete,mini app does not support no - browser weex

The properties listed below are supported for each environment, and the properties not listed are not guaranteed for each environment.

styles supported attributes and situation description:

Property Type Description Default
styles.backgroundColor color background color -
styles.height length Length value -
styles.width length Length value -
styles.opacity number Opacity 0-1 -
styles.transform string transform type,see below for details -

styles.transform supported attributes:

Property Type Description Default
translate、translateX、translateY number | percentage Specify where the element is moved to 0
rotate、rotateX、rotateY angle Specifies the angle at which the element is deflected 0
scale、scaleX、scaleY number Specify multiples of zoomed in and out elements 1

options:

Property Type Description Default
options.timingFunction string Animation effect,valid values are:"linear","ease","ease-in","ease-in-out","ease-out"(Unlisted values, there may be compatibility issues) ease
options.delay number Animation delay time 0
options.duration number Animation duration 0

Return

Mini app return export(),other cases return undefined

Mini app instructions:

Because the mini app can't provide DOMNode, and use animation way is different. So the mini app needs to get the animation content by the export() method and then manually bind to the element.

Usage

<view animation="{{transitionInfo}}"></view>
Page({
  data: {
    transitionInfo: null,
  },
  onShow(){
    const transitionInfo = transition(null, {
      transform: 'translate(10px, 20px) scale(1.5, 1.5) rotate(90deg)',
      opacity: '0.5'
    }, {
      timingFunction: 'ease',
      delay: 0,
      duration: 1000
    });
 
    this.setData({
      transitionInfo: transitionInfo.export()
    });
  }
})

Readme

Keywords

Package Sidebar

Install

npm i universal-transition

Weekly Downloads

593

Version

1.1.1

License

BSD-3-Clause

Unpacked Size

29.5 kB

Total Files

28

Last publish

Collaborators

  • zeroling
  • rax-publisher