Universal-transition NPM

universal-transition

Used to create transition animation.

Supported

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

icon_miniapp_bytedance

Arguments

Property	Type	Description	Required	Default
domNode	`DOMNode`	Specified element，mini app does not support，see below for detailsmini app instructions	yes	-
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	-

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()
    });
  }
})

Rax

universal-unit-tool style-unit universal-device universal-env