react-transition-group动画以及数字滚动效果实现

Posted 2023-04-03

参考技术A import CSSTransition, TransitionGroup from 'react-transition-group'

一个元素的显示隐藏：需要用CSSTransition将动画的元素包裹起来

CSSTransition包裹的元素可以使用class的钩子函数控制动画的形式

原理是：
每个数字由一张竖向的由0-9的图片改变位置来实现滚动，
注意千分符和小数点等其他字符串的单独处理

附赠图片

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。不管怎样，干杯，祝你有美好的一天。