|
@@ -45,9 +45,9 @@ export default {
|
|
|
$route(to, from) {
|
|
$route(to, from) {
|
|
|
const lastPath = this.history[this.history.length - 1] || {},
|
|
const lastPath = this.history[this.history.length - 1] || {},
|
|
|
{ isReplace, isBack } = this.$router;
|
|
{ isReplace, isBack } = this.$router;
|
|
|
- console.log(to.meta.idx , from.meta.idx);
|
|
|
|
|
if (to.meta.idx && from.meta.idx) {
|
|
if (to.meta.idx && from.meta.idx) {
|
|
|
- this.transitionName = to.meta.idx > from.meta.idx ? "fold-left" : "fold-right";
|
|
|
|
|
|
|
+ this.transitionName =
|
|
|
|
|
+ to.meta.idx > from.meta.idx ? "fold-left" : "fold-right";
|
|
|
} else if (lastPath.path === to.path) {
|
|
} else if (lastPath.path === to.path) {
|
|
|
this.transitionName = "fold-right";
|
|
this.transitionName = "fold-right";
|
|
|
this.history.pop();
|
|
this.history.pop();
|
|
@@ -104,12 +104,12 @@ export default {
|
|
|
|
|
|
|
|
.fold-left-enter-active {
|
|
.fold-left-enter-active {
|
|
|
animation-name: fold-left-in;
|
|
animation-name: fold-left-in;
|
|
|
- animation-duration: 0.3s;
|
|
|
|
|
|
|
+ animation-duration: 0.1s;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.fold-left-leave-active {
|
|
.fold-left-leave-active {
|
|
|
animation-name: fold-left-out;
|
|
animation-name: fold-left-out;
|
|
|
- animation-duration: 0.3s;
|
|
|
|
|
|
|
+ animation-duration: 0.1s;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@keyframes fold-left-in {
|
|
@keyframes fold-left-in {
|
|
@@ -144,12 +144,12 @@ export default {
|
|
|
|
|
|
|
|
.fold-right-enter-active {
|
|
.fold-right-enter-active {
|
|
|
animation-name: fold-right-in;
|
|
animation-name: fold-right-in;
|
|
|
- animation-duration: 0.5s;
|
|
|
|
|
|
|
+ animation-duration: 0.1s;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.fold-right-leave-active {
|
|
.fold-right-leave-active {
|
|
|
animation-name: fold-right-out;
|
|
animation-name: fold-right-out;
|
|
|
- animation-duration: 0.5s;
|
|
|
|
|
|
|
+ animation-duration: 0.1s;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@keyframes fold-right-in {
|
|
@keyframes fold-right-in {
|