标签: react-transition-group

我正在尝试创建一个用于登录的模式，该模式在您单击登录按钮时淡入并在您关闭它时淡出。我决定使用“react-transition-group”库来实现它。淡入效果很好，但它会立即淡出，而没有应用动画。我怎样才能让它工作？

连接组件：

<div>
                <ModalRoot {...this.props}>
                    <Grid>
                        <Menu {...this.props}/>
                        <div className='wrapper'>
                            <div className='content'>
                                <Form postTodo={this.props.postTodo}/>
                                <ul className='todo-list'>
                                   <CSSTransitionGroup
                                    transitionName='todo'
                                    transitionEnterTimeout={500}
                                    transitionLeaveTimeout={300}>
                                        {todoItems}
                                    </CSSTransitionGroup>    
                                </ul>
                            </div>
                        </div>
                    </Grid>
                </ModalRoot> 
            </div>

模态根：

const MODAL_COMPONENTS = {
  LOGIN_MODAL: LoginModal,
  /* other modals */
};

const ModalRoot = (props: any) => {
    const {isVisible, isMaskShown, window} = props.modal;
    const Modal = MODAL_COMPONENTS[window];
    if(!isVisible) {
      return (
        <div>
          {props.children}
        </div>
      );
    }
    if(isMaskShown) {
      return (
        <CSSTransitionGroup
          transitionName='mask'
          transitionAppear={true}
          transitionAppearTimeout={500}
          transitionEnterTimeout={0}
          transitionLeaveTimeout={300}>
            <Mask>
              <Modal key={100} hideModal={props.hideModal} …

问题是我的表单有三种状态：默认，错误和成功。根据状态，将特定组件呈现到dom中。当此组件进入或离开时，我需要添加淡入动画。

我已经尝试过自定义CSS，GSAP（但不想将更多的软件包安装到我的项目中），现在尝试使用react-transition-group。

保持简单很简单，我创建了“错误”组件，如下所示：

export default class NewsletterFormError extends React.Component {
   componentWillMount() {
   }
   componentDidMount() {
   }
   render() {
      return (
        <div className="NewsletterFormError">
          I'm an error message
        <style jsx>{`
          .NewsletterFormError {
            font-size: 50px;
          }  
        `}</style>
        </div>
    )
  }
}

在索引页面上，我有：

    { this.state.formError &&
        <CSSTransitionGroup
        transitionName="test"
        transitionAppear={true}
        transitionAppearTimeout={200}            
        transitionEnter={true}
        transitionEnterTimeout={2000}
        transitionLeave={true}
        transitionLeaveTimeout={2000}>
          <NewsletterFormError />
        </CSSTransitionGroup>
      }

对于某些共振，当this.state.formErroris时true，组件将渲染并完成淡入，但是当状态变为时false，淡出将不起作用。

使用 CSSTransition 组件和 React 我想应用淡入动画

在这里你可以找到我想要实现的一个小例子：https : //codesandbox.io/s/j75712qjvy

在第一次加载时，文本会淡入，但在单击下面的某些按钮时不会再次出现。

每次我单击一个按钮时，状态都会更新并重新呈现组件。所以我的期望是fadeIn 动画应该重新启动。

我忽略了什么？

这是我的代码：

 renderSoundWave = () => {
    const defaultStyle = {
      opacity: 1,
      transition: `opacity ${DURATION}ms ease-in-out`,
    }

    const transitionStyles = {
      entering: { opacity: 1 },
      entered:  { opacity: 0 },
    };
    return (

    <Transition timeout={DURATION} in={this.animate}>
      {(state) => (
        <div className={styles.soundWaves}
             style={{ ...defaultStyle, ...transitionStyles[state]}}> {/* Error here! */
          <SoundWaves/>
        </div>
        )}
    </Transition>
      );
  }

我想用Transitioninreact-transition-group来动画图标SoundWave。

但是我收到此错误：

错误 TS7017：元素隐式具有“任意”类型，因为类型 '{ 输入：{ opacity: number; }; 输入：{ 不透明度：数字；}; }' 没有索引签名。

错误指向...transitionStyles[state]上面

我不明白为什么会抛出这个错误。是什么导致了这种类型错误？

我整天都在扯头发，试图让它发挥作用。我注意到的是，无论出于何种原因，过渡类 (classNames="fade") 永远不会应用于页面元素。因此，当我从一个页面导航到另一个页面时，两个页面组件都会在短时间内（超时时间）显示。

我应该在 600 毫秒内拥有什么...

<div class="RTG"> 
    <div class="page fade-appear fade-enter fade-enter-active"> <!-- 
destination component HTML --></div>
    <div class="page fade-exit fade-exit-active"> <!-- start component HTML --></div>
</div>

我得到的是..

<div class="RTG">
   <!-- "fade..." classes never applied to the child nodes" -->
   <div class="page"> <!-- destination component HTML --></div>
   <div class="page"> <!-- start component HTML --></div>
</div>

然后在 600 毫秒超时后，我只剩下......

<div class="RTG">
   <div class="page"> <!-- destination component HTML --></div>
</div>

注意 1：我将“RTG”类名放在 TransitionGroup 组件上，只是为了验证我的“页面”类组件实际上是 TransitionGroup 组件的直接后代。不存在任何其他原因。

注意 2：我使用的是 react-transition-group@2.4.0，因为我与最新版本存在兼容性问题。 …

我目前正在react-transition-group与react-router-dom使用来动画路线更改，并且效果很好。

我遇到的唯一问题是，当切换路由并且我需要在componentDidMount生命周期挂钩中发送或获取一些数据时，它会触发两次。我相当确定这是由于react-transition-group但我想知道是否有一个明显的解决方案来解决这个问题。

我发现这一点是因为它在数据库中插入了两次实体，这与预期的行为相去甚远。

登录后的转换示例componentDidMount