React Transition Group

https://github.com/reactjs/react-transition-group

Transition

http://www.w3school.com.cn/tiy/t.asp?f=css3_transition

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
  width:100px;
  height:100px;
  background:blue;
  transition:width 2s;
  -moz-transition:width 2s; /* Firefox 4 */
  -webkit-transition:width 2s; /* Safari and Chrome */
  -o-transition:width 2s; /* Opera */
}
div:hover
{
   width:300px;
}
</style>
</head>
<body>

<div></div>

The Transition component

import Transition from 'react-transition-group/Transition';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
  entering: { opacity: 0 },
  entered:  { opacity: 1 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {(state) => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);

CSSTransition

classNames={{
 appear: 'my-appear',
 appearActive: 'my-active-appear',
 enter: 'my-enter',
 enterActive: 'my-active-enter',
 enterDone: 'my-done-enter,
 exit: 'my-exit',
 exitActive: 'my-active-exit',
 exitDone: 'my-done-exit,
}}

type: string | { appear?: string, appearActive?: string, enter?: string, enterActive?: string, enterDone?: string, exit?: string, exitActive?: string, exitDone?: string, } onEnter A callback fired immediately after the 'enter' or 'appear' class is applied.

type: Function(node: HtmlElement, isAppearing: bool) onEntering A callback fired immediately after the 'enter-active' or 'appear-active' class is applied.

type: Function(node: HtmlElement, isAppearing: bool) onEntered A callback fired immediately after the 'enter' or 'appear' classes are removed and the done class is added to the DOM node.

type: Function(node: HtmlElement, isAppearing: bool) onExit A callback fired immediately after the 'exit' class is applied.

type: Function(node: HtmlElement) onExiting A callback fired immediately after the 'exit-active' is applied.

type: Function(node: HtmlElement onExited A callback fired immediately after the 'exit' classes are removed and the exit-done class is added to the DOM node.

type: Function(node: HtmlElement)

TransitionGroup

results matching ""

    No results matching ""