React - 动画挂载和卸载单个组件

Question

这么简单的事情应该很容易完成，但我对它的复杂程度感到震惊。

我想做的就是为 React 组件的安装和卸载设置动画，仅此而已。以下是我迄今为止尝试过的方法以及每种解决方案都不起作用的原因：

ReactCSSTransitionGroup - 我根本没有用CSS 类，都是JS样式，所以这个不行
ReactTransitionGroup - 这个较低的级别 API 很棒，但是它需要你在动画完成时使用回调，所以只使用 CSS 转换在这里不起作用.总有动画库，这就引出了下一点：
GreenSock - IMO 的许可对于商业用途过于严格。
React Motion - 这看起来很棒，但是 TransitionMotion 对于我需要的东西来说非常混乱和过于复杂。
当然我可以像 Material UI 那样耍花招，渲染元素但保持隐藏状态 (left: -10000px)，但我不想走那条路。我认为它很老套，我想要我的组件卸载以便它们清理并且不会弄乱 DOM.

我想要一些容易实现的东西。在 mount 上，为一组样式设置动画；在卸载时，为相同（或另一组）样式设置动画。完毕。它还必须在多个平台上具有高性能。

我在这里碰壁了。如果我遗漏了什么并且有一种简单的方法可以做到这一点，请告诉我。

Answer 1

这有点冗长，但我已经使用了所有本机事件和方法来实现此动画。否 ReactCSSTransitionGroup、ReactTransitionGroup 等

我用过的东西

React 生命周期方法
onTransitionEnd 事件

这是如何工作的

根据传递的 mount prop(mounted) 和默认样式(opacity: 0) 安装元素
安装或更新后，使用 componentDidMount（componentWillReceiveProps 进行进一步更新）以超时更改样式 (opacity: 1)（使其异步）。
unmount时，给组件传递一个prop来标识unmount，再次更改样式(opacity: 0)，onTransitionEnd，从DOM中删除unmount元素。

继续循环。

看一下代码，你就明白了。如果需要任何说明，请发表评论。

希望对您有所帮助。

class App extends React.Component{
  constructor(props) {
    super(props)
    this.transitionEnd = this.transitionEnd.bind(this)
    this.mountStyle = this.mountStyle.bind(this)
    this.unMountStyle = this.unMountStyle.bind(this)
    this.state ={ //base css
      show: true,
      style :{
        fontSize: 60,
        opacity: 0,
        transition: 'all 2s ease',
      }
    }
  }
  
  componentWillReceiveProps(newProps) { // check for the mounted props
    if(!newProps.mounted)
      return this.unMountStyle() // call outro animation when mounted prop is false
    this.setState({ // remount the node when the mounted prop is true
      show: true
    })
    setTimeout(this.mountStyle, 10) // call the into animation
  }
  
  unMountStyle() { // css for unmount animation
    this.setState({
      style: {
        fontSize: 60,
        opacity: 0,
        transition: 'all 1s ease',
      }
    })
  }
  
  mountStyle() { // css for mount animation
    this.setState({
      style: {
        fontSize: 60,
        opacity: 1,
        transition: 'all 1s ease',
      }
    })
  }
  
  componentDidMount(){
    setTimeout(this.mountStyle, 10) // call the into animation
  }
  
  transitionEnd(){
    if(!this.props.mounted){ // remove the node on transition end when the mounted prop is false
      this.setState({
        show: false
      })
    }
  }
  
  render() {
    return this.state.show && <h1 style={this.state.style} onTransitionEnd={this.transitionEnd}>Hello</h1> 
  }
}

class Parent extends React.Component{
  constructor(props){
    super(props)
    this.buttonClick = this.buttonClick.bind(this)
    this.state = {
      showChild: true,
    }
  }
  buttonClick(){
    this.setState({
      showChild: !this.state.showChild
    })
  }
  render(){
    return <div>
        <App onTransitionEnd={this.transitionEnd} mounted={this.state.showChild}/>
        <button onClick={this.buttonClick}>{this.state.showChild ? 'Unmount': 'Mount'}</button>
      </div>
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

利用从 Pranesh 的回答中获得的知识，我想出了一个可配置和可重用的替代解决方案：

const AnimatedMount = ({ unmountedStyle, mountedStyle }) => {
  return (Wrapped) => class extends Component {
    constructor(props) {
      super(props);
      this.state = {
        style: unmountedStyle,
      };
    }

    componentWillEnter(callback) {
      this.onTransitionEnd = callback;
      setTimeout(() => {
        this.setState({
          style: mountedStyle,
        });
      }, 20);
    }

    componentWillLeave(callback) {
      this.onTransitionEnd = callback;
      this.setState({
        style: unmountedStyle,
      });
    }

    render() {
      return <div
        style={this.state.style}
        onTransitionEnd={this.onTransitionEnd}
      >
        <Wrapped { ...this.props } />
      </div>
    }
  }
};

用法：

import React, { PureComponent } from 'react';

class Thing extends PureComponent {
  render() {
    return <div>
      Test!
    </div>
  }
}

export default AnimatedMount({
  unmountedStyle: {
    opacity: 0,
    transform: 'translate3d(-100px, 0, 0)',
    transition: 'opacity 250ms ease-out, transform 250ms ease-out',
  },
  mountedStyle: {
    opacity: 1,
    transform: 'translate3d(0, 0, 0)',
    transition: 'opacity 1.5s ease-out, transform 1.5s ease-out',
  },
})(Thing);

最后，在另一个组件的 render 方法中：

return <div>
  <ReactTransitionGroup>
    <Thing />
  </ReactTransitionGroup>
</div>

Answer 3

对于那些考虑反应运动的人来说，在安装和卸载时为单个组件设置动画可能会让人不知所措。

有一个名为 react-motion-ui-pack 的库，可以让这个过程更容易开始。它是 react-motion 的包装器，这意味着您可以从库中获得所有好处（即您可以中断动画，同时进行多个卸载）。

用法：

import Transition from 'react-motion-ui-pack'

<Transition
  enter={{ opacity: 1, translateX: 0 }}
  leave={{ opacity: 0, translateX: -100 }}
  component={false}
>
  { this.state.show &&
      <div key="hello">
        Hello
      </div>
  }
</Transition>

Enter 定义了组件的结束状态； leave 是卸载组件时应用的样式。

您可能会发现，使用 UI 包几次后，react-motion 库可能不再那么令人生畏了。

Answer 4

使用 react-move。

动画进入和退出过渡要容易得多

example on codesandbox

Answer 5

我在工作中反驳过这个问题，看似简单，其实在React中是没有的。在您渲染类似以下内容的正常情况下：

this.state.show ? {childen} : null;

因为 this.state.show 立即将 children 更改为 mounted/unmounted。

我采用的一种方法是创建一个包装器组件 Animate 并像

一样使用它

<Animate show={this.state.show}>
  {childen}
</Animate>

现在随着 this.state.show 的变化，我们可以通过 getDerivedStateFromProps(componentWillReceiveProps) 感知道具变化并创建中间渲染阶段来执行动画。

当 children 安装或卸载时，我们从 静态阶段 开始。

一旦我们检测到 show 标志发生变化，我们就会进入 准备阶段 ，在此我们从 ReactDOM.findDOMNode.getBoundingClientRect()。

然后进入 Animate State 我们可以使用 css 转换将高度、宽度和不透明度从 0 更改为计算值（如果卸载则更改为 0）。

过渡结束时，我们用onTransitionEndapi变回 Static阶段。

关于各个阶段如何顺利过渡的细节很多，但这可能是总体思路:)

如果有人感兴趣，我创建了一个 React 库 https://github.com/MingruiZhang/react-animate-mount 来分享我的解决方案。欢迎任何反馈:)

Answer 6

这是我使用新钩子 API（使用 TypeScript）based on this post 来延迟组件卸载阶段的解决方案：

function useDelayUnmount(isMounted: boolean, delayTime: number) {
    const [ shouldRender, setShouldRender ] = useState(false);

    useEffect(() => {
        let timeoutId: number;
        if (isMounted && !shouldRender) {
            setShouldRender(true);
        }
        else if(!isMounted && shouldRender) {
            timeoutId = setTimeout(
                () => setShouldRender(false), 
                delayTime
            );
        }
        return () => clearTimeout(timeoutId);
    }, [isMounted, delayTime, shouldRender]);
    return shouldRender;
}

用法：

const Parent: React.FC = () => {
    const [ isMounted, setIsMounted ] = useState(true);
    const shouldRenderChild = useDelayUnmount(isMounted, 500);
    const mountedStyle = {opacity: 1, transition: "opacity 500ms ease-in"};
    const unmountedStyle = {opacity: 0, transition: "opacity 500ms ease-in"};

    const handleToggleClicked = () => {
        setIsMounted(!isMounted);
    }

    return (
        <>
            {shouldRenderChild && 
                <Child style={isMounted ? mountedStyle : unmountedStyle} />}
            <button onClick={handleToggleClicked}>Click me!</button>
        </>
    );
}

CodeSandbox link.

Answer 7

这是我的 2 美分：感谢@deckele 的解决方案。我的解决方案是基于他的，它是有状态的组件版本，完全可重用。

这是我的沙箱：https://codesandbox.io/s/302mkm1m。

这是我的 snippet.js:

import ReactDOM from "react-dom";
import React, { Component } from "react";
import style from  "./styles.css"; 

class Tooltip extends Component {

  state = {
    shouldRender: false,
    isMounted: true,
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.shouldRender !== nextState.shouldRender) {
      return true
    }
    else if (this.state.isMounted !== nextState.isMounted) {
      console.log("ismounted!")
      return true
    }
    return false
  }
  displayTooltip = () => {
    var timeoutId;
    if (this.state.isMounted && !this.state.shouldRender) {
      this.setState({ shouldRender: true });
    } else if (!this.state.isMounted && this.state.shouldRender) {
      timeoutId = setTimeout(() => this.setState({ shouldRender: false }), 500);
      () => clearTimeout(timeoutId)
    }
    return;
  }
  mountedStyle = { animation: "inAnimation 500ms ease-in" };
  unmountedStyle = { animation: "outAnimation 510ms ease-in" };

  handleToggleClicked = () => {
    console.log("in handleToggleClicked")
    this.setState((currentState) => ({
      isMounted: !currentState.isMounted
    }), this.displayTooltip());
  };

  render() {
    var { children } = this.props
    return (
      <main>
        {this.state.shouldRender && (
          <div className={style.tooltip_wrapper} >
            <h1 style={!(this.state.isMounted) ? this.mountedStyle : this.unmountedStyle}>{children}</h1>
          </div>
        )}

        <style>{`

           @keyframes inAnimation {
    0% {
      transform: scale(0.1);
      opacity: 0;
    }
    60% {
      transform: scale(1.2);
      opacity: 1;
    }
    100% {
      transform: scale(1);  
    }
  }

  @keyframes outAnimation {
    20% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(0);
      opacity: 0;
    }
  }
          `}
        </style>
      </main>
    );
  }
}


class App extends Component{

  render(){
  return (
    <div className="App"> 
      <button onClick={() => this.refs.tooltipWrapper.handleToggleClicked()}>
        click here </button>
      <Tooltip
        ref="tooltipWrapper"
      >
        Here a children
      </Tooltip>
    </div>
  )};
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 8

我认为使用 react-transition-group 中的 Transition 可能是跟踪 mounting/unmounting 的最简单方法。它非常灵活。我正在使用一些类来展示它的易用性，但你绝对可以使用 addEndListener 道具连接你自己的 JS 动画——我也很幸运地使用了 GSAP .

沙盒：https://codesandbox.io/s/k9xl9mkx2o

这是我的代码。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Transition } from "react-transition-group";
import styled from "styled-components";

const H1 = styled.h1`
  transition: 0.2s;
  /* Hidden init state */
  opacity: 0;
  transform: translateY(-10px);
  &.enter,
  &.entered {
    /* Animate in state */
    opacity: 1;
    transform: translateY(0px);
  }
  &.exit,
  &.exited {
    /* Animate out state */
    opacity: 0;
    transform: translateY(-10px);
  }
`;

const App = () => {
  const [show, changeShow] = useState(false);
  const onClick = () => {
    changeShow(prev => {
      return !prev;
    });
  };
  return (
    <div>
      <button onClick={onClick}>{show ? "Hide" : "Show"}</button>
      <Transition mountOnEnter unmountOnExit timeout={200} in={show}>
        {state => {
          let className = state;
          return <H1 className={className}>Animate me</H1>;
        }}
      </Transition>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 9

以下是我在 2019 年制作加载微调器时解决此问题的方法。我正在使用 React 功能组件。

我有一个父 App 组件，它有一个子 Spinner 组件。

App 具有应用程序是否正在加载的状态。加载应用程序时，Spinner 会正常呈现。当应用程序未加载时（isLoading 为假）Spinner 使用道具 shouldUnmount.

呈现

App.js:

import React, {useState} from 'react';
import Spinner from './Spinner';

const App = function() {
    const [isLoading, setIsLoading] = useState(false);

    return (
        <div className='App'>
            {isLoading ? <Spinner /> : <Spinner shouldUnmount />}
        </div>
    );
};

export default App;

Spinner 具有是否隐藏的状态。一开始，使用默认的道具和状态，Spinner 正常呈现。 Spinner-fadeIn class 动画淡入。当 Spinner 收到道具 shouldUnmount 时，它使用 Spinner-fadeOut class 渲染相反，将其设置为淡出动画。

不过我也希望组件在淡出后卸载。

此时我尝试使用 onAnimationEnd React 合成事件，类似于上面@pranesh-ravi 的解决方案，但它没有用。相反，我使用 setTimeout 将状态设置为隐藏，延迟与动画的长度相同。 Spinner 将在 isHidden === true 延迟后更新，并且不会呈现任何内容。

这里的关键是parent不unmount child，它告诉child什么时候unmount，child处理完自己的unmount业务后自己unmount。

Spinner.js:

import React, {useState} from 'react';
import './Spinner.css';

const Spinner = function(props) {
    const [isHidden, setIsHidden] = useState(false);

    if(isHidden) {
        return null

    } else if(props.shouldUnmount) {
        setTimeout(setIsHidden, 500, true);
        return (
            <div className='Spinner Spinner-fadeOut' />
        );

    } else {
        return (
            <div className='Spinner Spinner-fadeIn' />
        );
    }
};

export default Spinner;

Spinner.css:

.Spinner {
    position: fixed;
    display: block;
    z-index: 999;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -20px;
    height: 40px;
    width: 40px;
    border: 5px solid #00000080;
    border-left-color: #bbbbbbbb;
    border-radius: 40px;
}

.Spinner-fadeIn {
    animation: 
        rotate 1s linear infinite,
        fadeIn .5s linear forwards;
}

.Spinner-fadeOut {
    animation: 
        rotate 1s linear infinite,
        fadeOut .5s linear forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

Answer 10

我也非常需要单组件动画。我厌倦了使用 React Motion 但我正在为这样一个微不足道的问题拉扯我的头发......（我的事情）。经过一些谷歌搜索后，我在他们的 git 回购协议中发现了这个 post 。希望对大家有帮助..

Referenced From & also the credit。到目前为止，这对我有用。我的用例是在加载和卸载的情况下进行动画和卸载的模式。

class Example extends React.Component {
  constructor() {
    super();
    
    this.toggle = this.toggle.bind(this);
    this.onRest = this.onRest.bind(this);

    this.state = {
      open: true,
      animating: false,
    };
  }
  
  toggle() {
    this.setState({
      open: !this.state.open,
      animating: true,
    });
  }
  
  onRest() {
    this.setState({ animating: false });
  }
  
  render() {
    const { open, animating } = this.state;
    
    return (
      <div>
        <button onClick={this.toggle}>
          Toggle
        </button>
        
        {(open || animating) && (
          <Motion
            defaultStyle={open ? { opacity: 0 } : { opacity: 1 }}
            style={open ? { opacity: spring(1) } : { opacity: spring(0) }}
            onRest={this.onRest}
          >
            {(style => (
              <div className="box" style={style} />
            ))}
          </Motion>
        )}
      </div>
    );
  }
}

Answer 11

这可以使用 react-transition-group 中的 CSSTransition 组件轻松完成，就像您提到的库一样。诀窍是你需要包装 CSSTransition 组件 而不是像通常 那样的 show/hide 机制，即{show && <Child>}... 否则您将隐藏动画并且它不会工作。示例：

ParentComponent.js

import React from 'react';
import {CSSTransition} from 'react-transition-group';

function ParentComponent({show}) {
return (
  <CSSTransition classes="parentComponent-child" in={show} timeout={700}>
    <ChildComponent>
  </CSSTransition>
)}


ParentComponent.css

// animate in
.parentComponent-child-enter {
  opacity: 0;
}
.parentComponent-child-enter-active {
  opacity: 1;
  transition: opacity 700ms ease-in;
}
// animate out
.parentComponent-child-exit {
  opacity: 1;
}
.parentComponent-child-exit-active {
  opacity: 0;
  transition: opacity 700ms ease-in;
}

Answer 12

Framer motion

从 npm 安装 framer-motion。

import { motion, AnimatePresence } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
  <AnimatePresence>
    {isVisible && (
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      />
    )}
  </AnimatePresence>
)

Answer 13

我知道这里有很多答案，但我仍然没有找到适合我需要的答案。我要：

功能组件
一种解决方案，可以让我的组件在 mounted/unmounted 时轻松褪色 in/out。

经过几个小时的摆弄，我有一个可以工作的解决方案，我会说 90%。我在下面代码的注释块中写下了限制。我仍然喜欢更好的解决方案，但这是我找到的最好的解决方案，包括此处的其他解决方案。

const TIMEOUT_DURATION = 80 // Just looked like best balance of silky smooth and stop delaying me.

// Wrap this around any views and they'll fade in and out when mounting /
// unmounting.  I tried using <ReactCSSTransitionGroup> and <Transition> but I
// could not get them to work.  There is one major limitation to this approach:
// If a component that's mounted inside of <Fade> has direct prop changes,
// <Fade> will think that it's a new component and unmount/mount it.  This
// means the inner component will fade out and fade in, and things like cursor
// position in forms will be reset. The solution to this is to abstract <Fade>
// into a wrapper component.

const Fade: React.FC<{}> = ({ children }) => {
  const [ className, setClassName ] = useState('fade')
  const [ newChildren, setNewChildren ] = useState(children)

  const effectDependency = Array.isArray(children) ? children : [children]

  useEffect(() => {
    setClassName('fade')

    const timerId = setTimeout(() => {
      setClassName('fade show')
      setNewChildren(children)
    }, TIMEOUT_DURATION)

    return () => {
      clearTimeout(timerId)
    }   

  }, effectDependency)

  return <Container fluid className={className + ' p-0'}>{newChildren}</Container>
}

如果您有一个要淡入淡出的组件 in/out，请将其包裹在 <Fade> 例如。 <Fade><MyComponent/><Fade>.

请注意，这使用 react-bootstrap 作为 class 名称和 <Container/>，但两者都可以轻松替换为自定义 CSS 和常规旧 [=15] =].

Answer 14

如果我使用 Velocity 或 AnimeJS 库直接为节点设置动画（而不是 css 或 setTimeout），那么我发现我可以设计一个 hook 提供动画状态 on 和功能 onToggle 启动动画（例如，滑动、淡入淡出）。

基本上钩子所做的是打开和关闭动画，之后相应地更新on。因此我们可以准确的获取到动画的状态。如果不这样做，将临时回复 duration.

/**
 * A hook to provide animation status.
 * @class useAnimate
 * @param {object} _                props
 * @param {async} _.animate         Promise to perform animation
 * @param {object} _.node           Dom node to animate
 * @param {bool} _.disabled         Disable animation
 * @returns {useAnimateObject}      Animate status object
 * @example
 *   const { on, onToggle } = useAnimate({
 *    animate: async () => { },
 *    node: node
 *  })
 */

import { useState, useCallback } from 'react'

const useAnimate = ({
  animate, node, disabled,
}) => {
  const [on, setOn] = useState(false)

  const onToggle = useCallback(v => {
    if (disabled) return
    if (v) setOn(true)
    animate({ node, on: v }).finally(() => {
      if (!v) setOn(false)
    })
  }, [animate, node, disabled, effect])

  return [on, onToggle]
}

export default useAnimate

用法如下，

  const ref = useRef()
  const [on, onToggle] = useAnimate({
    animate: animateFunc,
    node: ref.current,
    disabled
  })
  const onClick = () => { onToggle(!on) }

  return (
      <div ref={ref}>
          {on && <YOUROWNCOMPONENT onClick={onClick} /> }
      </div>
  )

动画实现可以是，

import anime from 'animejs'

const animateFunc = (params) => {
  const { node, on } = params
  const height = on ? 233 : 0
  return new Promise(resolve => {
    anime({
      targets: node,
      height,
      complete: () => { resolve() }
    }).play()
  })
}

Answer 15

您可以为此使用 React SyntheticEvent。

通过 onAnimationEnd 或 onTransitionEnd 等事件，您可以实现这一点。

React 文档：https://reactjs.org/docs/events.html#animation-events

代码示例：https://dev.to/michalczaplinski/super-easy-react-mount-unmount-animations-with-hooks-4foj

Answer 16

你总是可以使用 React 生命周期方法，但 react-transition-group 是迄今为止我遇到的最方便的动画库，无论你是使用 styled-components 还是普通的 css。当您想要跟踪组件的安装和卸载并相应地渲染动画时，它特别有用。当你使用纯 css 类名时，将 Transition 与 styled-components 和 CSSTransition 一起使用。

Answer 17

您可以使用 React Transition Group 执行此操作。它为您提供 CSS classes，因此您可以在这些 CSS classes 中编写动画代码。

按照这个简单的例子

import {CSSTransition } from 'react-transition-group';//This should be imported
import './AnimatedText.css';

const AnimatedText = () => {
    const [showText, setShowText] = useState(false); //By default text will be not shown

    //Handler to switch states
    const switchHandler = () =>{
        setShowText(!showText);
    };

    return (
        //in : pass your state here, it will used by library to toggle. It should be boolean
        //timeout: your amination total time(it should be same as mentioned in css)
        //classNames: give class name of your choice, library will prefix it with it's animation classes
        //unmountOnExit: Component will be unmounted when your state changes to false
        <CSSTransition in={showText} timeout={500} classNames='fade' unmountOnExit={true}>
            <h1>Animated Text</h1>
        </CSSTransition>  
        <button onClick={switchHandler}>Show Text</button>                  
    );
};

export default AnimatedText;

现在，让我们在CSS文件(AnimatedText.css)中编写动画，记住class名称属性（在本例中为fade）

//fade class should be prefixed

/*****Fade In effect when component is mounted*****/
//This is when your animation starts
fade-enter {
  opacity: 0;
}

//When your animation is active
.fade-enter.fade-enter-active {
  opacity: 1;
  transition: all 500ms ease-in;
}
/*****Fade In effect when component is mounted*****/


/*****Fade Out effect when component is unmounted*****/
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: all 500ms ease-out;
}

/*****Fade Out effect when component is unmounted*****/

还有一个出现class，可以在您的组件第一次加载时使用。查看文档了解更多详情

Answer 18

如果您正在寻找简单的钩子示例：

import React, { useEffect, useReducer } from "react";
import ReactDOM from "react-dom";

const ANIMATION_TIME = 2 * 1000;

function Component() {
  const [isMounted, toggleMounted] = useReducer((p) => !p, true);
  const [isAnimateAnmount, toggleAnimateUnmount] = useReducer((p) => !p, false);
  const [isVisible, toggleVisible] = useReducer((p) => (p ? 0 : 1), 0);

  useEffect(() => {
    if (isAnimateAnmount) {
      toggleVisible();
      toggleAnimateUnmount();
      setTimeout(() => {
        toggleMounted();
      }, ANIMATION_TIME);
    }
  }, [isAnimateAnmount]);

  useEffect(() => {
    toggleVisible();
  }, [isMounted]);

  return (
    <>
      <button onClick={toggleAnimateUnmount}>toggle</button>
      <div>{isMounted ? "Mounted" : "Unmounted"}</div>
      {isMounted && (
        <div
          style={{
            fontSize: 60,
            opacity: isVisible,
            transition: "all 2s ease"
          }}
        >
          Example
        </div>
      )}
    </>
  );
}

Answer 19

我创建了一个名为 MountAnimation 的通用 WrapperComponent，这样您就可以对元素进行动画处理，而不必总是一遍又一遍地编写相同的内容。它在后台使用 CSSTransitions，因此您需要安装它。

安装依赖项

npm install react-transition-group

在您的文件夹之一中创建组件

import { CSSTransition } from "react-transition-group"

export const MountAnimation = ({
  children,
  timeout = 300, // MATCH YOUR DEFAULT ANIMATION DURATION
  isVisible = false,
  unmountOnExit = true,
  classNames = "transition-translate-y", // ADD YOUR DEFAULT ANIMATION
  ...restProps
}) => {
  return (
    <CSSTransition
      in={isVisible}
      timeout={timeout}
      classNames={classNames}
      unmountOnExit={unmountOnExit}
      {...restProps}
    >
      <div>{children}</div>
    </CSSTransition>
  )
}

简单地使用它：

import { MountAnimation } from '../../path/to/component'

...

const [isElementVisible, setIsElementVisible] = useState(false)

return (
    <MountAnimation isVisible={isElementVisible}>
       // your content here
    </MountAnimation>

)

（在这里发挥创意）您需要在 CSS 文件中声明您的动画。如果您是 code-splitting，请确保在全局可用的 CSS 文件中声明它。在此示例中，我使用以下动画：

.transition-translate-y-enter {
  opacity: 0;
  transform: translateY(-5px);
}
.transition-translate-y-enter-active {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
.transition-translate-y-exit {
  opacity: 1;
  transform: translateY(0px);
}
.transition-translate-y-exit-active {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}

这是此实现的一个实例：

https://codesandbox.io/s/vibrant-elion-ngfzr?file=/src/App.js

React - 动画挂载和卸载单个组件

React - animate mount and unmount of a single component

animation

css-animations

reactjs

gsap

react-motion