mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
64 lines
1.3 KiB
SCSS
64 lines
1.3 KiB
SCSS
$bezier-function: cubic-bezier(.1, .7, .1, 1);
|
|
|
|
.slide-in-up {
|
|
// Start hidden
|
|
opacity: 0;
|
|
// Start it down low
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
|
|
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
|
|
transition: -webkit-transform 0.4s, opacity 0.1s;
|
|
|
|
-webkit-transition-timing-function: $bezier-function;
|
|
transition-timing-function: $bezier-function;
|
|
|
|
-webkit-animation-fill-mode: forwards;
|
|
}
|
|
|
|
.slide-in-up.active {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
@-webkit-keyframes fadeOut {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
@keyframes fadeOut {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.fade-in {
|
|
-webkit-animation: fadeOut 0.3s;
|
|
animation: fadeOut 0.3s;
|
|
&.active {
|
|
-webkit-animation: fadeIn 0.3s;
|
|
animation: fadeIn 0.3s;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes spin {
|
|
100% { -moz-transform: rotate(360deg); }
|
|
}
|
|
@-webkit-keyframes spin {
|
|
100% { -webkit-transform: rotate(360deg); }
|
|
}
|
|
@keyframes spin {
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform:rotate(360deg);
|
|
}
|
|
}
|