Skip to content

Instantly share code, notes, and snippets.

@paigen11
Created April 12, 2020 16:34
Show Gist options
  • Save paigen11/a082ab5ca5935838728d6a95058b22e1 to your computer and use it in GitHub Desktop.
Save paigen11/a082ab5ca5935838728d6a95058b22e1 to your computer and use it in GitHub Desktop.
Sample CSS code of React Transition Group's SwitchTransition component
.fade-enter .btn {
opacity: 0;
transform: translateX(-100%);
}
.fade-enter-active .btn {
opacity: 1;
transform: translateX(0%);
}
.fade-exit .btn {
opacity: 1;
transform: translateX(0%);
}
.fade-exit-active .btn {
opacity: 0;
transform: translateX(100%);
}
.fade-enter-active .btn,
.fade-exit-active .btn {
transition: opacity 500ms, transform 500ms;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment