.enter, .leave { position: absolute; } .enterActive, .leaveActive { transition-timing-function: ease-in-out; transition-duration: 350ms; transition-property: transform, opacity; } .enter { opacity: 0; transform: translateX(100%); &.enterActive { opacity: 1; transform: translateX(0); } } .leave { opacity: 1; transform: translateX(0); &.leaveActive { opacity: 0; transform: translateX(-100%); } }