2015-10-11 20:07:09 +03:00
|
|
|
.enter, .leave {
|
|
|
|
position: absolute;
|
2015-12-12 13:35:31 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
.enterActive, .leaveActive {
|
2015-10-11 20:07:09 +03:00
|
|
|
transition-timing-function: ease-in-out;
|
2015-12-12 13:35:31 +03:00
|
|
|
transition-duration: 350ms;
|
2015-10-11 20:07:09 +03:00
|
|
|
transition-property: transform, opacity;
|
|
|
|
}
|
|
|
|
|
|
|
|
.enter {
|
|
|
|
opacity: 0;
|
2015-12-12 13:35:31 +03:00
|
|
|
transform: translateX(100%);
|
2015-10-11 20:07:09 +03:00
|
|
|
|
|
|
|
&.enterActive {
|
|
|
|
opacity: 1;
|
2015-12-12 13:35:31 +03:00
|
|
|
transform: translateX(0);
|
2015-10-11 20:07:09 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.leave {
|
|
|
|
opacity: 1;
|
2015-12-12 13:35:31 +03:00
|
|
|
transform: translateX(0);
|
2015-10-11 20:07:09 +03:00
|
|
|
|
|
|
|
&.leaveActive {
|
|
|
|
opacity: 0;
|
2015-12-12 13:35:31 +03:00
|
|
|
transform: translateX(-100%);
|
2015-10-11 20:07:09 +03:00
|
|
|
}
|
|
|
|
}
|