Naughty Pinching Mannequins

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

    Keywords

    Install

    npm i universal-transition

    DownloadsWeekly Downloads

    764

    Version

    1.1.1

    License

    BSD-3-Clause

    Unpacked Size

    29.5 kB

    Total Files

    28

    Last publish

    Collaborators

    • balloonzzq
    • rax-publisher
    • wintercn
    • yuanyan
    • zeroling