mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
431 lines
10 KiB
SCSS
431 lines
10 KiB
SCSS
$ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
|
|
|
|
/**
|
|
* Animations
|
|
* --------------------------------------------------
|
|
* The animations in this file are "simple" - not too complex
|
|
* and pretty easy on performance. They can be overidden
|
|
* and enhanced easily.
|
|
*/
|
|
|
|
.noop-animation {
|
|
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
right:0;
|
|
bottom:0;
|
|
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
|
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
|
}
|
|
}
|
|
|
|
.slide-left-right {
|
|
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
right:0;
|
|
bottom:0;
|
|
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
|
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
|
}
|
|
> .ng-enter, &.ng-enter {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
}
|
|
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
}
|
|
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
}
|
|
|
|
&.reverse {
|
|
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
right:0;
|
|
bottom:0;
|
|
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
|
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
|
}
|
|
> .ng-enter, &.ng-enter {
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
}
|
|
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
}
|
|
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
.slide-left-right-ios7 {
|
|
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
right:0;
|
|
bottom:0;
|
|
-webkit-transition:all 250ms;
|
|
-webkit-transition-timing-function: $ios7-timing-function;
|
|
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
|
transition:all 250ms;
|
|
transition-timing-function: $ios7-timing-function;
|
|
box-shadow: $menu-side-shadow;
|
|
}
|
|
> .ng-enter, &.ng-enter {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
}
|
|
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
}
|
|
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
|
-webkit-transform: translate3d(-20%, 0, 0);
|
|
}
|
|
|
|
&.reverse {
|
|
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
right:0;
|
|
bottom:0;
|
|
-webkit-transition:all 250ms;
|
|
-webkit-transition-timing-function: $ios7-timing-function;
|
|
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
|
transition-timing-function: $ios7-timing-function;
|
|
}
|
|
> .ng-enter, &.ng-enter {
|
|
-webkit-transform: translate3d(-20%, 0, 0);
|
|
}
|
|
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
}
|
|
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slideInLeft {
|
|
0% {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
}
|
|
}
|
|
@-webkit-keyframes slideOutLeft {
|
|
0% {
|
|
-webkit-transform: translate3d(0px,0,0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate3d(-100%,0,0);
|
|
}
|
|
}
|
|
@-webkit-keyframes slideInRight {
|
|
0% {
|
|
-webkit-transform: translate3d(-100%,0,0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
}
|
|
}
|
|
@-webkit-keyframes slideOutRight {
|
|
0% {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate3d(100%,0,0);
|
|
}
|
|
}
|
|
|
|
.slide-in-left {
|
|
-webkit-transform: translate3d(0%,0,0);
|
|
&.ng-enter, > .ng-enter {
|
|
-webkit-animation-duration: 250ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-webkit-animation-name: slideInLeft;
|
|
}
|
|
&.ng-leave, > .ng-leave {
|
|
-webkit-animation-duration: 250ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-webkit-animation-name: slideOutLeft;
|
|
}
|
|
}
|
|
|
|
|
|
.slide-in-left-add {
|
|
-webkit-transform: translate3d(100%,0,0);
|
|
-webkit-animation-duration: 250ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
}
|
|
.slide-in-left-add-active {
|
|
-webkit-animation-name: slideInLeft;
|
|
}
|
|
|
|
.slide-out-left {
|
|
-webkit-transform: translate3d(-100%,0,0);
|
|
&.ng-enter, > .ng-enter {
|
|
-webkit-animation-duration: 250ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-webkit-animation-name: slideOutLeft;
|
|
}
|
|
&.ng-leave, > .ng-leave {
|
|
-webkit-animation-duration: 250ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-webkit-animation-name: slideOutLeft;
|
|
}
|
|
}
|
|
|
|
.slide-out-left {
|
|
}
|
|
|
|
.slide-out-left-add {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-webkit-animation-duration: 250ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
}
|
|
.slide-out-left-add-active {
|
|
-webkit-animation-name: slideOutLeft;
|
|
}
|
|
|
|
.slide-in-right {
|
|
-webkit-transform: translate3d(0%,0,0);
|
|
&.ng-enter, > .ng-enter {
|
|
-webkit-animation-duration: 250ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-webkit-animation-name: slideInRight;
|
|
}
|
|
&.ng-leave, > .ng-leave {
|
|
-webkit-animation-duration: 250ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-webkit-animation-name: slideInRight;
|
|
}
|
|
}
|
|
|
|
.slide-in-right-add {
|
|
-webkit-transform: translate3d(-100%,0,0);
|
|
-webkit-animation-duration: 250ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
}
|
|
.slide-in-right-add-active {
|
|
-webkit-animation-name: slideInRight;
|
|
}
|
|
|
|
.slide-out-right {
|
|
-webkit-transform: translate3d(100%,0,0);
|
|
&.ng-enter, > .ng-enter {
|
|
-webkit-animation-duration: 250ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-webkit-animation-name: slideOutRight;
|
|
}
|
|
&.ng-leave, > .ng-leave {
|
|
-webkit-animation-duration: 250ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-webkit-animation-name: slideOutRight;
|
|
}
|
|
}
|
|
|
|
.slide-out-right {
|
|
}
|
|
.slide-out-right-add {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-webkit-animation-duration: 250ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
}
|
|
.slide-out-right-add-active {
|
|
-webkit-animation-name: slideOutRight;
|
|
}
|
|
|
|
$slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
|
|
@-webkit-keyframes slideInUp {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes slideOutUp {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.slide-in-up {
|
|
opacity: 1;
|
|
// Start it down low
|
|
-webkit-transform: translate3d(0, 0%, 0);
|
|
|
|
&.ng-enter, .ng-enter {
|
|
// Start hidden
|
|
opacity: 0;
|
|
// Start it down low
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
|
|
-webkit-animation-duration: 400ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: $slide-in-up-function;
|
|
}
|
|
|
|
&.ng-enter-active, .ng-enter-active {
|
|
-webkit-animation-name: slideInUp;
|
|
}
|
|
|
|
&.ng-leave, .ng-leave {
|
|
-webkit-animation-duration: 400ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: $slide-in-up-function;
|
|
}
|
|
|
|
&.ng-leave-active, .ng-leave {
|
|
-webkit-animation-name: slideOutUp;
|
|
}
|
|
}
|
|
|
|
.slide-in-up-add {
|
|
-webkit-animation-duration: 400ms;
|
|
-webkit-animation-fill-mode: both;
|
|
-webkit-animation-timing-function: $slide-in-up-function;
|
|
}
|
|
.slide-in-up-add-active {
|
|
-webkit-animation-name: slideInUp;
|
|
}
|
|
|
|
.slide-in-up-remove {
|
|
-webkit-animation-duration: 400ms;
|
|
-webkit-animation-fill-mode: forwards;
|
|
-webkit-animation-timing-function: $slide-in-up-function;
|
|
}
|
|
.slide-in-up-remove-active {
|
|
-webkit-animation-name: slideOutUp;
|
|
}
|
|
|
|
@-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;
|
|
}
|
|
}
|
|
|
|
.fade-in-not-out {
|
|
&.ng-enter, .ng-enter {
|
|
position: relative;
|
|
-webkit-animation: fadeIn 0.3s;
|
|
animation: fadeIn 0.3s;
|
|
}
|
|
&.ng-leave, .ng-leave {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@-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);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* Some component specific animations
|
|
*/
|
|
|
|
.nav-title-slide-ios7 {
|
|
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
|
-webkit-transition:all 250ms;
|
|
-webkit-transition-timing-function: $ios7-timing-function;
|
|
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
|
transition:all 250ms;
|
|
transition-timing-function: $ios7-timing-function;
|
|
opacity: 1;
|
|
}
|
|
> .ng-enter, &.ng-enter {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(30%, 0, 0);
|
|
}
|
|
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
}
|
|
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-30%, 0, 0);
|
|
}
|
|
|
|
}
|
|
.reverse {
|
|
.nav-title-slide-ios7 {
|
|
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
|
-webkit-transition:all 250ms;
|
|
-webkit-transition-timing-function: $ios7-timing-function;
|
|
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
|
transition:all 250ms;
|
|
transition-timing-function: $ios7-timing-function;
|
|
opacity: 1;
|
|
}
|
|
> .ng-enter, &.ng-enter {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-30%, 0, 0);
|
|
}
|
|
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
}
|
|
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(30%, 0, 0);
|
|
}
|
|
|
|
}
|
|
}
|