Skip to content

Instantly share code, notes, and snippets.

@rmdort
Created December 5, 2017 02:56
Show Gist options
  • Select an option

  • Save rmdort/6db0ed6eff78b2daa7852f9278f8a17f to your computer and use it in GitHub Desktop.

Select an option

Save rmdort/6db0ed6eff78b2daa7852f9278f8a17f to your computer and use it in GitHub Desktop.
React fade In component
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