React 组件进入和退出动画实现

Posted 2023-04-18 ruoyxue

实现了React中组件的进入和退出动画效果，主要是通过props给组件传参来决定进入和退出，然后根据props选择不同的animation class，并将组件停留在动画的结束阶段。

在实现一个React中的弹框组件时，想给组件加个进入和退出动画，但发现React没有Vue3那样现成的api，因此需要自己设计。

主要思路为给组件添加一个state来选择className，不同的className会给组件添加不同的动画效果，再使用css animation中的forwards来使组件固定在结束的位置。核心代码如下：

// cartDropdown.jsx

import React from \'react\'
import CartDropdownStyle from \'./cartDropdown.module.css\'


export default function CartDropdown(props) 
	const isCartOpen = props
	const animationClass = isCartOpen ? CartDropdownStyle.animation__fadeIn : CartDropdownStyle.animation__fadeOut

	return (
		<div className=animationClass>
			Cart Dropdown
		</div>
	)

/* cartDropdown.module.css */

.animation__fadeIn 
	animation: dropdownEnterFromTop .3s forwards ease-out;


.animation__fadeOut 
	animation: dropdownLeaveToTop .3s forwards ease-out;


@keyframes dropdownEnterFromTop 
	0% 
		opacity: 0;
		visibility: hidden;
		transform: translateY(-20px);
	
	100% 
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	


@keyframes dropdownLeaveToTop 
	0% 
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	
	100% 
		opacity: 0;
		visibility: hidden;
		transform: translateY(-20px);
	

基本思路很简单，每次需要更改弹框的状态都会更改CartDropdown组件的isCartOpen属性从而重新渲染组件，使之有不同的animation效果。通过设置animation-fill-mode属性为forwards将组件停留在动画的结束状态。

react-transition-group 中的退出延迟动画

【中文标题】react-transition-group 中的退出延迟动画

【英文标题】：Exit delay animation in react-transition-group

【发布时间】：2019-01-17 16:44:49

【问题描述】：

我在 ReactJS 和 GatsbyJS (V2) 项目中使用 react-transition-group。

我的页面过渡使用动画，但是当Link 退出时，exiting 动画被缩短，因为下一页已准备好进入。

我已尝试延迟 Link 操作，但当页面更改延迟时，exit 动画不会触发，直到 delay 结束并且 Link 被操作。

如何在启动exiting 动画onClick 的同时更改页面delay？或者，有没有更好的方法或props 可用？

这是我的代码

Layout.js

class Layout extends React.Component 
  ...
  return (
    <Transition>children</Transition>
  );

Transition.js

class Transition extends React.Component 
constructor(props) 
    super(props);
    this.state =  exiting: false ;
    this.listenerHandler = this.listenerHandler.bind(this);
  

  listenerHandler() 
    this.setState( exiting: true );
  

  componentDidMount() 
    window.addEventListener(historyExitingEventType, this.listenerHandler);
  

  componentWillUnmount() 
    window.removeEventListener(historyExitingEventType, this.listenerHandler);
  

  static getDerivedStateFromProps( exiting ) 
    if (exiting) 
      return  exiting: false ;
    
    return null;
  

  render() 
    const transitionProps = 
      timeout: 
        enter: 0,
        exit: timeout
      ,
      appear: true,
      in: !this.state.exiting
    ;

    return (
      <ReactTransition ...transitionProps>
        status => (
          <div
            style=
              ...getTransitionStyle( status, timeout )
            
          >
            this.props.children
          </div>
        )
      </ReactTransition>
    );
  


export default Transition;

gatsby-config.js

import createHistory from 'history/createBrowserHistory';

const timeout = 1500;
const historyExitingEventType = `history::exiting`;

const getUserConfirmation = (pathname, callback) => 
  const event = new CustomEvent(historyExitingEventType, 
    detail:  pathname 
  );
  window.dispatchEvent(event);
  setTimeout(() => 
    callback(true);
  , timeout);
;

let history;
if (typeof document !== 'undefined') 
  history = createHistory( getUserConfirmation );
  history.block(location => location.pathname);


export const replaceHistory = () => history;

export  historyExitingEventType, timeout ;

getTransitionStyle.js

const getTransitionStyles = timeout => 

return 
    entering: 
      transform: `scale(1.05) translateZ(0)`,
      opacity: 0
    ,
    entered: 
      transition: `transform 750ms ease, opacity $timeoutms ease`,
      transitionDelay: `750ms`,
      transform: `scale(1) translateZ(0)`,
      opacity: 1
    ,
    exiting: 
      transition: `transform 750ms ease, opacity $timeoutms ease`,
      transform: `scale(0.98) translateZ(0)`,
      opacity: 0
    
  ;
;

const getTransitionStyle = ( timeout, status ) =>
  getTransitionStyles(timeout)[status];

export default getTransitionStyle;

【问题讨论】：

如果您使用的是最新的 Gatsby 测试版，这将不起作用，因为 Gatsby 现在使用的是 Reach Router 而不是 react-router。 （尚）不支持延迟路由转换。我对此here发表了评论。

谢谢@F***Schultz。我昨天在提供的链接上看到了您的评论，并将寻找对该主题的回应。再次感谢您 - 很高兴知道 Gatsby 社区中的某个人正在寻找解决方案。

@F***Schultz。我注意到您在 Gatsby github 上添加了一个完美解决我的问题的解决方案。谢谢你。我想如果你想用那个解决方案来回答这个问题并关闭它，我会按照你的方式发送赏金。干杯。

【参考方案1】：

Gatsby v2 使用 Reach Router 而不是 React Router，因此将 getUserConfirmation 与 replaceHistory 一起使用将不再有效。在 Gatsby v2 RC 中，您可以使用 react-pose 更直接地创建页面转换：

_{gatsby-browser.js 和 gatsby-s-s-r.js：}

import React from "react"
import Transition from "./src/components/transition"
 export const wrapPageElement = ( element, props ) => 
  return <Transition ...props>element</Transition>

_{transition.js 组件：}

import React from "react"
import posed,  PoseGroup  from "react-pose"

const timeout = 250

class Transition extends React.PureComponent 
  render() 
    const  children, location  = this.props

    const RoutesContainer = posed.div(
      enter:  delay: timeout, delayChildren: timeout ,
    )

    // To enable page transitions on mount / initial load,
    // use the prop `animateOnMount=true` on `PoseGroup`.
    return (
      <PoseGroup>
        <RoutesContainer key=location.pathname>children</RoutesContainer>
      </PoseGroup>
    )
  


export default Transition

_{在您的页面内：}

// Use `posed.div` elements anywhere on the pages.

const Transition = posed.div(
  enter: 
    opacity: 1,
  ,
  exit: 
    opacity: 0,
  ,
)

// ...

<Transition>Hello World!</Transition>

---

查看official example 以获得有效的演示。

【讨论】：

感谢费边。这是一个很好的例子。显然接受了答案，但我该如何申请赏金？当我接受答案时，它通常可用。

我没有看到任何关于有赏金的问题。不过不用担心！

进一步查看赏金已过期，抱歉。在 150 时也是一个不错的选择 - 会让你超过 7k。不管怎样，干杯，祝你有美好的一天。