ReactCSSTransitionGroup 有什么问题？

Question

我的组件中的 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 方块从右边滑入，但没有任何反应！找不到错误的代码，看起来一切正常。

Answer 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 provides the optional prop transitionAppear, to add an extra transition phase at the initial mount of the component. There is generally no transition phase at the initial mount as the default value of transitionAppear is false. The following is an example which passes the prop transitionAppear with the value true.

<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;
}

ReactCSSTransitionGroup 有什么问题？

What is wrong with ReactCSSTransitionGroup?

css

animation

reactjs

reactcsstransitiongroup