inula-transitions

Openinula transition component.

过渡效果组件

部分功能移植于 react-transition-group

Installation

npm

npm i inula-transitions

yarn

yarn add inula-transitions

Usage

AnimateTransition

package.json

{
  "dependencies": {
     + "animate.css": "^4.1.1",
  }
}

import { useRef } from "openinula";
import { AnimateTransition } from "inula-transitions";

function App() {
  const nodeRef = useRef(null);

  return (
    <AnimateTransition nodeRef={nodeRef} appear={true} in={true} timeout={1000} classNames="animate__fadeInLeft">
      <div ref={nodeRef} style="width:100px;height:100px;background:blue;">
        BLUE
      </div>
    </AnimateTransition>
  );
}

CSSTransition

import { useRef, useState } from "openinula";
import { CSSTransition } from "inula-transitions";

// 属性接口参照react-transition-group.CSSTransition

function App() {
  const [inProp, setInProp] = useState(false);
  const nodeRef = useRef(null);
  return (
    <div>
      <CSSTransition nodeRef={nodeRef} in={inProp} timeout={200} classNames="my-node">
        <div ref={nodeRef}>{"I'll receive my-node- classes"}</div>
      </CSSTransition>
      <button type="button" onClick={() => setInProp(true)}>
        Click to Enter
      </button>
    </div>
  );
}

Transition

import { useState, useRef } from 'openinula';
import { Transition } from 'inula-transitions';

// 属性接口参照react-transition-group.Transition

function App() {
  const [inProp, setInProp] = useState(false);
  const nodeRef = useRef(null);
  return (
    <div>
      <Transition nodeRef={nodeRef} in={inProp} timeout={500}>
        {state => (
          // ...
        )}
      </Transition>
      <button onClick={() => setInProp(true)}>
        Click to Enter
      </button>
    </div>
  );
}