Question

我正在尝试制作一个动画，以便在按预期方式工作时可以平滑地向上滑动。我现在面临的问题是关闭时无法正常工作。我曾期望它能平稳过渡，但我完全不了解。我使用的是旧版本v1。下面，我用CSSTransitionGroup

包裹了模态

这里包含模态的组件，当pickingDates为true时，模态被打开

import { CSSTransitionGroup } from 'react-transition-group';
import css from './Space.css';

{pickingDates && (
  <Query query={GET_SELECTED_DATES}>
    {({ data: { selectedDates } }) => {
       ....
       ....

        return (
        <CSSTransitionGroup
          transitionName={css}
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
          transitionAppearTimeout={500}
          transitionAppear
         >
              <CalendarSimplifiedModal
                ...
                ...
              />
        </CSSTransitionGroup>
        );
    }}
  </Query>
)}

此过渡的css如下：

.enter,
.appear {
  opacity: 0;
  transform: translateY(75px);
}

.enterActive,
.appearActive {
  transform: translateY(0);
  transition: transform 0.3s, opacity 0.3s;  
  opacity: 1;
}

.leave {
  opacity: 1;
  transform: translateY(0);
}

.leaveActive {
  transform: translateY(75px);
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;  
}

我错过了CSS上的任何内容吗？建议和帮助将不胜感激！

（v1）react-transition-group-过渡/离开不起作用

0 个答案: