mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
55 lines
1.2 KiB
SCSS
55 lines
1.2 KiB
SCSS
$bezier-function: cubic-bezier(.1, .7, .1, 1);
|
|
|
|
/*
|
|
.slide-in-up.enter {
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
|
|
-webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
|
|
transition: transform .25s ease-in-out, opacity 1ms .25s;
|
|
}
|
|
*/
|
|
|
|
.slide-in-up {
|
|
&.enter {
|
|
-webkit-transition: -webkit-transform .4s, opacity .4s;
|
|
transition: transform .4s, opacity .4s;
|
|
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
|
|
-webkit-transition-timing-function: $bezier-function;
|
|
|
|
}
|
|
|
|
&.enter-active {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
&.leave {
|
|
-webkit-transition: -webkit-transform .25s, opacity .25s;
|
|
transition: transform .25s, opacity .25s;
|
|
}
|
|
|
|
&.leave-active {
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from { opacity:0; }
|
|
to { opacity:1; }
|
|
}
|
|
@-webkit-keyframes fadein { /* Safari and Chrome */
|
|
from { opacity:0; }
|
|
to { opacity:1; }
|
|
}
|
|
|
|
.fade-in {
|
|
opacity: 0;
|
|
animation: fadein 0.5s;
|
|
-webkit-animation: fadein 0.5s;
|
|
}
|