0

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的方块从右边滑入，但什么也没有发生！找不到错误的代码，看起来一切正常。

4

1 回答 1

2

<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 提供了可选的属性 transitionAppear，在组件的初始挂载时添加一个额外的过渡阶段。由于 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;
}
于 2016-08-16T02:31:29.950 回答