|
|
@@ -1,32 +1,79 @@
|
|
|
-.route-in-enter-from {
|
|
|
- z-index: 1;
|
|
|
- transform: translate3d(100%, 0, 0);
|
|
|
-}
|
|
|
-
|
|
|
+.route-in-leave-from,
|
|
|
+.route-in-enter-from,
|
|
|
+.route-out-enter-from,
|
|
|
.route-out-enter-from {
|
|
|
- z-index: 1;
|
|
|
- transform: translate3d(-100%, 0, 0);
|
|
|
+ will-change: transform, opacity;
|
|
|
}
|
|
|
|
|
|
-.route-in-enter-active,
|
|
|
.route-in-leave-active,
|
|
|
+.route-in-enter-active,
|
|
|
.route-out-enter-active,
|
|
|
.route-out-leave-active {
|
|
|
pointer-events: none;
|
|
|
- position: absolute;
|
|
|
- will-change: transform;
|
|
|
- transition: transform 200ms;
|
|
|
- background-color: #fff;
|
|
|
+ transition: transform 300ms;
|
|
|
+}
|
|
|
+
|
|
|
+.route-in-leave-from {
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.route-in-leave-active {
|
|
|
+ transition: transform 280ms;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: fixed;
|
|
|
+ z-index: 100;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: rgba(0, 0, 0, .5);
|
|
|
+ opacity: 1;
|
|
|
+ transition: opacity 300ms;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.route-in-enter-from {
|
|
|
+ z-index: 1;
|
|
|
+ transform: translate3d(100%, 0, 0);
|
|
|
+}
|
|
|
+
|
|
|
+.route-in-enter-active {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 1000;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
|
|
|
.route-out-leave-active {
|
|
|
- //transition-delay: 35ms;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 1000;
|
|
|
transform: translate3d(100%, 0, 0);
|
|
|
}
|
|
|
|
|
|
-.route-in-leave-active {
|
|
|
- //transition-delay: 35ms;
|
|
|
- transform: translate3d(-100%, 0, 0);
|
|
|
+.route-out-enter-from {
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.route-out-enter-to {
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: fixed;
|
|
|
+ z-index: 100;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: rgba(0, 0, 0, .5);
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 300ms;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.app-page {
|