如何淡入文本，然后出

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>