陣營與切換

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