javascript - 在切换时使用 CSSTransitionGroup react 动画

Question

当单击按钮在状态之间切换时，我试图在组件进入和离开之间进行转换

我也试过把 <UserDetails />和 <UserEdit />作为单独的组件，但具有相同的结果，即不触发动画。

https://www.webpackbin.com/bins/-KjIPcMeQF3iriHRqTBW

Hello.js

import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'
import './styles.css'
export default class Hello extends React.Component {
constructor() {
super()

this.state = { showEdit: false }
this.handleEdit = this.handleEdit.bind(this)
}

handleEdit() { this.setState({ showEdit: !this.state.showEdit }) } 

render() {

 const UserDetails = () => (
 <div className="componenta" key="1">UserDetails</div>
 )
 const UserEdit = () => (
 <div className="componentb" key="2">UserEdit</div>
 )

return(
<div >
    <CSSTransitionGroup 
      transitionName="example"
      transitionEnterTimeout={10}
      transitionLeaveTimeout={600}>
    {this.state.showEdit ? <UserDetails /> : <UserEdit />}
    </CSSTransitionGroup>
    <button onClick={this.handleEdit}>Toggle</button>
</div>
)
}
}

样式.css

.thing-enter {
 opacity: 0.01;
 transition: opacity 1s ease-in;
}

.thing-enter.thing-enter-active {
  opacity: 1;
}

 .thing-leave {
  opacity: 1;
  transition: opacity 1s ease-in;
 }

 .thing-leave.thing-leave-active {
  opacity: 0.01;
 }

Answer 1

你有你的 key属性设置为错误的项目 - <div>不是 CSSTransitionGroup 的直系后代(因为您通过将其定义为函数将其包装到组件中)，因此它不知道添加或删除了哪些项目。您必须将 key 设置为 UserDetails和 UserEdit , 所以 CSSTransitionGroup可以正确确定它的 child 的变化。

这是您的 render有效的方法:

render() {

    const UserDetails = () => (
      <div className="componenta">UserDetails</div>
    )
    const UserEdit = () => (
      <div className="componentb">UserEdit</div>
    )
    return(
    <div >
        <CSSTransitionGroup 
          transitionName="example"
          transitionEnterTimeout={10}
          transitionLeaveTimeout={600}>
        {this.state.showEdit ? <UserDetails key="1" /> : <UserEdit key="2" />}
        </CSSTransitionGroup>
        <button onClick={this.handleEdit}>Toggle</button>
    </div>
    )
  }

另一种方法是存储 UserDetails和 UserEdit进入变量，然后渲染它们。这将允许您离开 key属性现在所在的位置，而不是移动它们。