텍스트를 페이드 인하는 방법

Question

다음에 텍스트 입력에 나타나는 알림을 만들어 사용자에게 텍스트가 저장되었음을 알리고 그 알림 텍스트를 사라지게하려고합니다.

기본적으로 해당 텍스트 입력이 제출되면이 작업을 복제하려고합니다.

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

나는 다음 밖으로, 즉 터무니 로터리 아니라, 그것을 페이드 수있는 방법을 생각할 수 없다.

나는 Redux도 사용하고 있으며, 이것을 사용하고 싶지만 필수 사항은 아닙니다. 어떤 조언을 주시면 감사하겠습니다.

Answer 1

CSS를 사용하여이를 처리 할 수 ​​있습니다. 다음은 매우 간단한 예제입니다 (redux 사용하지 않음). 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>