Question

我正在尝试构建可重用的动画叠加层。

但是，只检测到第一个组件装载，这意味着我只能在整个应用程序中使用此叠加层一次。如果我使用第二个，它就不会被动画化。

我尝试了很多东西，比如使用唯一键，转换名称等，但我无法使用它。这是当前的代码：

import React from 'react';
import { CSSTransitionGroup } from 'react-transition-group';
import styled from 'styled-componets'

const OverlayDiv = styled.div`

transition: opacity 300ms ease-in;
&._overlay-transition-appear,
&._overlay-transition-enter {
  opacity: 0.01;
}
&._overlay-transition-appear._loading-overlay-transition-appear-active,
&._overlay-transition-enter._loading-overlay-transition-enter-active {
  opacity: 1;
}
&._overlay-transition-leave {
  opacity: 1;
}
&._overlay-transition-leave._loading-overlay-transition-leave-active {
  opacity: 0;
}
`;


const animated = (WrappedComponent) => ({ animate = true, ...otherProps }) => {
  if (animate) {
    return (
      <CSSTransitionGroup
        transitionName="_overlay-transition"
        transitionAppear
        transitionEnterTimeout={500}
        transitionLeaveTimeout={500}
        transitionAppearTimeout={500}
      >
        <WrappedComponent {...otherProps} />
      </CSSTransitionGroup>
    );
  }
  return <WrappedComponent {...otherProps} />;
};
export const Overlay = ({ animate = true, className, parentDimensions, children }) => (
  <OverlayDiv
    key="overlay" // import for React CSS Transition
    className={className}
    height={parentDimensions ? `${parentDimensions.offsetHeight}px` : '100%'}
  >
    {children}
  </OverlayDiv>
      );

export default animated(Overlay);

对此有什么想法吗？

使用多个组件

0 个答案: