修改默认弹出层动画
parent
f53fb071f0
commit
c6f49984a7
|
@ -871,6 +871,41 @@
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@keyframes hinge {
|
||||||
|
0% {
|
||||||
|
-webkit-transform-origin: top left;
|
||||||
|
transform-origin: top left;
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
20%,
|
||||||
|
60% {
|
||||||
|
-webkit-transform: rotate3d(0, 0, 1, 80deg);
|
||||||
|
transform: rotate3d(0, 0, 1, 80deg);
|
||||||
|
-webkit-transform-origin: top left;
|
||||||
|
transform-origin: top left;
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
40%,
|
||||||
|
80% {
|
||||||
|
-webkit-transform: rotate3d(0, 0, 1, 60deg);
|
||||||
|
transform: rotate3d(0, 0, 1, 60deg);
|
||||||
|
-webkit-transform-origin: top left;
|
||||||
|
transform-origin: top left;
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate3d(0, 700px, 0);
|
||||||
|
transform: translate3d(0, 700px, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.flipInX {
|
.flipInX {
|
||||||
backface-visibility: visible !important;
|
backface-visibility: visible !important;
|
||||||
|
|
|
@ -74,9 +74,9 @@ export default {
|
||||||
'slideOutLeft',
|
'slideOutLeft',
|
||||||
'slideOutRight',
|
'slideOutRight',
|
||||||
'slideOutUp',
|
'slideOutUp',
|
||||||
'hinge',
|
// 'hinge',
|
||||||
],
|
],
|
||||||
inClass: 'animated flipInX',
|
inClass: 'animated jackInTheBox',
|
||||||
outClass: 'animated flipOutX',
|
outClass: 'animated flipOutX',
|
||||||
unwatchFn: null,
|
unwatchFn: null,
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue