Skip to content

Instantly share code, notes, and snippets.

@jsteenkamp

jsteenkamp/foo.js

Forked from ryanflorence/foo.js
Last active Aug 27, 2018
Embed
What would you like to do?
Animation/transition using react spring
// Adds a lovely fade in of the modal
// and a gentle slide-down of the modal content
class Demo extends React.Component {
state = { showDialog: false };
render() {
return (
<div>
<button onClick={() => this.setState({ showDialog: true })}>
Show Dialog
</button>
<Transition
from={{ opacity: 0, y: -10 }}
enter={{ opacity: 1, y: 0 }}
leave={{ opacity: 0, y: 10 }}
>
{this.state.showDialog &&
(styles => (
<DialogOverlay style={{ opacity: styles.opacity }}>
<DialogContent
style={{
transform: `translate3d(0px, ${styles.y}px, 0px)`,
border: "4px solid hsla(0, 0%, 0%, 0.5)",
borderRadius: 10
}}
>
<button onClick={() => this.setState({ showDialog: false })}>
Close Dialog
</button>
<p>React Spring makes it too easy!</p>
</DialogContent>
</DialogOverlay>
))}
</Transition>
</div>
);
}
}
@jsteenkamp

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.