ReactCSSTransitionGroup 有什么问题？答案

【问题标题】：What is wrong with ReactCSSTransitionGroup?ReactCSSTransitionGroup 有什么问题？
【发布时间】：2016-12-22 06:44:40
【问题描述】：

我在组件的render() 函数中有这段代码：

..
<ReactCSSTransitionGroup
  transitionName="testing"
  transitionEnterTimeout={600}
  transitionLeaveTimeout={600}>

  <div>testing animations!</div>

</ReactCSSTransitionGroup>
..

我的 CSS 文件中有这段代码：

.testing-enter {
    animation: slideIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.testing-leave {
    animation: slideOut 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes slideIn {
    0% {
        opacity 0
        transform translate3d(-50px, 0, 0)
    }
    100% {
        opacity 1
        transform translate3d(0, 0, 0)
    }
}
@keyframes slideOut {
    0% {
        opacity: 1
        transform: translate3d(0, 0, 0)
    }
    100% {
        opacity: 0
        transform: translate3d(50px, 0, 0)
    }
}

我只想让我的div 块从右侧滑入，但没有任何反应！找不到错误的代码，看起来一切正常。

【问题讨论】：

标签： css animation reactjs reactcsstransitiongroup

【解决方案1】：

<ReactCSSTransitionGroup/> 标记内有静态内容。你需要有动态的内容。假设您需要在鼠标单击时渲染<div>testing animations!</div>。您需要将子项分配给一个变量并在鼠标单击时修改该变量。

let myDiv = buttonClicked ? <div>testing animations!</div> : <div></div>

<ReactCSSTransitionGroup
  transitionName="testing"
  transitionEnterTimeout={600}
  transitionLeaveTimeout={600}>

  {myDiv}

</ReactCSSTransitionGroup>

如果没有执行任何操作并且您只需要在初始安装时为其设置动画，请改用 transition-appear。

ReactCSSTransitionGroup 提供了可选的 proptransitionAppear，在初始安装时添加一个额外的过渡阶段零件。初始安装时通常没有过渡阶段因为 transitionAppear 的默认值为 false。以下是一个传递值为 true 的 prop transitionAppear 的示例。

<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
   <div>testing animations!</div>
</ReactCSSTransitionGroup>


.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity .5s ease-in;
}

【讨论】：