How to use universal-transition - 7 common examples

resetAnimate() {
    const length = this.props.sourceData.length;
    if (length < 2) {
      return;
    }
    const ref = findDOMNode(this.animateElement);
    this.curr = 0;
    transition(ref, {
      transform: 'translate(0, 0)'
    }, {
      timingFunction: 'ease',
      delay: 0,
      duration: 0
    });
    this.fastAnimate(this.animateElement1, 0);
    this.fastAnimate(this.animateElement2, this.itemHeight * this.props.sourceData.length);
  }

transition: (Node, style, callback) => {
    transition(Node, style, {
      timingFunction: 'ease',
      delay: 0,
      duration: 300
    }, function() {
      callback && callback();
    });
  },

loadAnimate() {
    transition(findDOMNode(this.imageRef), {
      opacity: 1
    }, {
      timingFunction: 'ease-in-out',
      delay: 0,
      duration: 300
    });
  }

setTimeout(() => {
        transition(menuList, {
          opacity: 0
        }, {
          timingFunction: 'ease',
          delay: 0,
          duration: 300,
        }, () => {
          this.setState({
            visible: false
          });
        });
      }, 50);
    }

switchTo = (index, options = {params: {}}) => {
    let {beforeSwitch = noop, afterSwitch = noop} = this.props;
    let {duration = this.props.duration, params} = options;
    index = clamp(index, 0, this.itemCount - 1);
    let prevIndex = this.curIndex;
    beforeSwitch({index, params, prevIndex});
    this.curIndex = index;
    this.renderPanel(index);
    let itemWidth = this.itemWidth;
    let end = -index * itemWidth;
    const wrap = findDOMNode(this.refs.wrap);
    transition(wrap, {
      transform: `translateX(${end}rem)`,
      webkitTransform: `translateX(${end}rem)`
    }, {
      timingFunction: this.props.easing,
      delay: 0,
      duration: Math.max(this.props.isSlideEnabled ? duration : 0, MIN_DURATION)
    }, () => {
      this.curIndex = index;
      afterSwitch({index, params, prevIndex});
      this.handleScreens();
      this.handleSwipeBack();
    });
  }

animated = (state, callback) => {
    const {visible} = state;
    const {delay, duration} = this.props;
    transition(findDOMNode(this.refs.mask), {
      opacity: visible === true ? 1 : 0
    }, {
      timingFunction: 'ease',
      delay,
      duration
    }, () => {
      callback && callback();
    });
  }

map(transitionMap, (o) => {
        let transitionProps = {
          ...o.props,
          ...o.props.transform ? {
            transform: o.props.transform.join(' '),
            webkitTransform: o.props.transform.join(' ')
          } : {}
        };

        transition(o.element, transitionProps, {
          duration: o.duration,
          timingFunction: o.easing,
          delay: o.delay
        }, (e) => {
          if (o.duration === maxDuration && !callbackFlag) {
            callback && callback(e);
            callbackFlag = true;
          }
        });
      });
    }