Created
December 5, 2017 02:56
-
-
Save rmdort/6db0ed6eff78b2daa7852f9278f8a17f to your computer and use it in GitHub Desktop.
React fade In component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| import ReactDOM from 'react-dom' | |
| module.exports = (WrappedComponent) => { | |
| class FadeInComponent extends React.Component { | |
| componentDidMount () { | |
| // Get the components DOM node | |
| var elem = ReactDOM.findDOMNode(this) | |
| // Set the opacity of the element to 0 | |
| elem.style.opacity = 0 | |
| window.requestAnimationFrame(() => { | |
| // Now set a transition on the opacity | |
| elem.style.transition = 'opacity 250ms' | |
| // and set the opacity to 1 | |
| elem.style.opacity = 1 | |
| }) | |
| } | |
| render () { | |
| return <WrappedComponent {...this.props} /> | |
| } | |
| } | |
| return FadeInComponent | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment