Skip to content

Instantly share code, notes, and snippets.

@paigen11

paigen11/react-transition-group-sidebar-css.scss

Created April 12, 2020 22:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paigen11/7b7cafee2d0560cb833d01c3d8b3ab30 to your computer and use it in GitHub Desktop.
Save paigen11/7b7cafee2d0560cb833d01c3d8b3ab30 to your computer and use it in GitHub Desktop.
Download ZIP
Sample CSS code to style the animations of React Transition Group's CSSTransition component in a demo app
Raw
react-transition-group-sidebar-css.scss
.visible-enter {
z-index: 100;
display: flex;
flex-direction: column;
justify-content: space-around;
transform: translate(-100%);
background: #b65be1;
margin-top: -25px;
height: 50vh;
width: 60%;
position: absolute;
}
.visible-enter-active {
z-index: 100;
display: flex;
flex-direction: column;
justify-content: space-around;
transform: translate(0);
transition: transform 0.3s linear;
margin-top: -25px;
height: 50vh;
width: 60%;
position: absolute;
}
.visible-exit {
z-index: 100;
transform: translate(0);
display: flex;
flex-direction: column;
justify-content: space-around;
background: #b65be1;
position: fixed;
margin-top: -25px;
height: 50vh;
width: 60%;
}
.visible-exit-active {
z-index: 100;
width: 60%;
transform: translate(-100%);
transition: transform 0.3s linear;
display: flex;
flex-direction: column;
justify-content: space-around;
background: #b65be1;
position: fixed;
margin-top: -25px;
height: 50vh;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment