如何淡入文本，然後出

Question

我試圖讓一個通知接下來出現一個文本輸入以通知用戶他們的文本已保存，然後淡出該通知文本。

基本上我試圖複製這個動作，當提交相應的文本輸入。

$(this).fadeOut().next().fadeIn();

我想不出什麼辦法來淡化它，再出來，那不是荒唐迂迴。

我也使用Redux，並且想使用它，但這不是必需的。任何意見，將不勝感激。

Answer 1

您可以使用CSS來照顧這一點。這是一個非常簡單的例子（不使用redux）。使用JS來觸發，CSS風格。

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     show: false 
 
    }; 
 
    this.showNotification = this.showNotification.bind(this); 
 
    } 
 
    showNotification() { 
 
    // You can use redux for this. 
 
    this.setState({ 
 
     show: true, 
 
    }); 
 
    setTimeout(() => { 
 
     this.setState({ 
 
     show: false, 
 
     }); 
 
    }, 1000); 
 
    } 
 
    render() { 
 
    return (
 
     <div> 
 
     <button onClick={this.showNotification}>Save</button> 
 
     <Notification show={this.state.show} /> 
 
     </div> 
 
    ); 
 
    } 
 

 
} 
 

 
class Notification extends React.Component { 
 
    render() { 
 
    return <span className={this.props.show ? 'show' : ''}>Saved!</span> 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('View'));

span { 
 
    transition: 300ms all ease; 
 
    opacity: 0; 
 
    will-change: opacity; 
 
} 
 

 
.show { 
 
    opacity: 1; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="View"></div>