阵营与切换

Question

我试图让组件进入和离开时，该按钮被点击状态之间切换之间的过渡CSSTransitionGroup动画

我也试图把<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> 
) 
} 
} 

styles.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>不是直接的后代（因为通过将其定义为函数将其包装到组件中），因此它不知道添加或删除了哪些项目。您必须将您的密钥设置为UserDetails和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属性，而不是移动它们。

Answer 2

下面是使用显示器的工作示例：none来隐藏卸载组件

enter link description here