2

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

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

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

你好.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;
 }
4

2 回答 2

1

您将key属性设置为错误的项目 - 这<div>不是的直接后代CSSTransitionGroup（因为您通过将其定义为函数将其包装到组件中），因此它不知道添加或删除了哪些项目。您必须将密钥设置为 UserDetailsand UserEdit，这样CSSTransitionGroup才能正确确定其子项的更改。

这是您的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属性保留在它们现在所在的位置，而不是移动它们。

于 2017-05-04T13:29:56.713 回答
0

这是一个使用 display:none 隐藏卸载组件的工作示例

在此处输入链接描述

于 2017-05-05T07:38:15.280 回答