mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
588 lines
15 KiB
SCSS
588 lines
15 KiB
SCSS
/**
|
|
* Animations
|
|
* --------------------------------------------------
|
|
* The animations in this file are "simple" - not too complex
|
|
* and pretty easy on performance. They can be overidden
|
|
* and enhanced easily.
|
|
*/
|
|
|
|
$transition-duration: 250ms;
|
|
$slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
|
|
|
|
|
|
/**
|
|
* Keyframes
|
|
* --------------------------------------------------
|
|
*/
|
|
|
|
// Slide In From The Bottom To The Top
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes slideInUp {
|
|
0% { -webkit-transform: translate3d(0, 100%, 0); }
|
|
100% { -webkit-transform: translate3d(0, 0, 0); }
|
|
}
|
|
@-moz-keyframes slideInUp {
|
|
0% { -moz-transform: translate3d(0, 100%, 0); }
|
|
100% { -moz-transform: translate3d(0, 0, 0); }
|
|
}
|
|
@keyframes slideInUp {
|
|
0% { transform: translate3d(0, 100%, 0); }
|
|
100% { transform: translate3d(0, 0, 0); }
|
|
}
|
|
|
|
|
|
// Slide Out From The Top To Bottom
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes slideOutUp {
|
|
0% { -webkit-transform: translate3d(0, 0, 0); }
|
|
100% { -webkit-transform: translate3d(0, 100%, 0); }
|
|
}
|
|
@-moz-keyframes slideOutUp {
|
|
0% { -moz-transform: translate3d(0, 0, 0); }
|
|
100% { -moz-transform: translate3d(0, 100%, 0); }
|
|
}
|
|
@keyframes slideOutUp {
|
|
0% { transform: translate3d(0, 0, 0); }
|
|
100% { transform: translate3d(0, 100%, 0); }
|
|
}
|
|
|
|
|
|
// Slide In From Left
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes slideInFromLeft {
|
|
from { -webkit-transform: translate3d(-100%, 0, 0); }
|
|
to { -webkit-transform: translate3d(0, 0, 0); }
|
|
}
|
|
@-moz-keyframes slideInFromLeft {
|
|
from { -moz-transform: translateX(-100%); }
|
|
to { -moz-transform: translateX(0); }
|
|
}
|
|
@keyframes slideInFromLeft {
|
|
from { transform: translateX(-100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
|
|
|
|
// Slide In From Right
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes slideInFromRight {
|
|
from { -webkit-transform: translate3d(100%, 0, 0); }
|
|
to { -webkit-transform: translate3d(0, 0, 0); }
|
|
}
|
|
@-moz-keyframes slideInFromRight {
|
|
from { -moz-transform: translateX(100%); }
|
|
to { -moz-transform: translateX(0); }
|
|
}
|
|
@keyframes slideInFromRight {
|
|
from { transform: translateX(100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
|
|
|
|
// Slide Out To Left
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes slideOutToLeft {
|
|
from { -webkit-transform: translate3d(0, 0, 0); }
|
|
to { -webkit-transform: translate3d(-100%, 0, 0); }
|
|
}
|
|
@-moz-keyframes slideOutToLeft {
|
|
from { -moz-transform: translateX(0); }
|
|
to { -moz-transform: translateX(-100%); }
|
|
}
|
|
@keyframes slideOutToLeft {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(-100%); }
|
|
}
|
|
|
|
|
|
// Slide Out To Right
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes slideOutToRight {
|
|
from { -webkit-transform: translate3d(0, 0, 0); }
|
|
to { -webkit-transform: translate3d(100%, 0, 0); }
|
|
}
|
|
@-moz-keyframes slideOutToRight {
|
|
from { -moz-transform: translateX(0); }
|
|
to { -moz-transform: translateX(100%); }
|
|
}
|
|
@keyframes slideOutToRight {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(100%); }
|
|
}
|
|
|
|
|
|
// Fade Out
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes fadeOut {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
@-moz-keyframes fadeOut {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
@keyframes fadeOut {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
|
|
// Fade In
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@-moz-keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
|
|
// Fade Half In
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes fadeInHalf {
|
|
from { background-color: rgba(0,0,0,0); }
|
|
to { background-color: rgba(0,0,0,0.5); }
|
|
}
|
|
@-moz-keyframes fadeInHalf {
|
|
from { background-color: rgba(0,0,0,0); }
|
|
to { background-color: rgba(0,0,0,0.5); }
|
|
}
|
|
@keyframes fadeInHalf {
|
|
from { background-color: rgba(0,0,0,0); }
|
|
to { background-color: rgba(0,0,0,0.5); }
|
|
}
|
|
|
|
|
|
// Fade Half Out
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes fadeOutHalf {
|
|
from { background-color: rgba(0,0,0,0.5); }
|
|
to { background-color: rgba(0,0,0,0); }
|
|
}
|
|
@-moz-keyframes fadeOutHalf {
|
|
from { background-color: rgba(0,0,0,0.5); }
|
|
to { background-color: rgba(0,0,0,0); }
|
|
}
|
|
@keyframes fadeOutHalf {
|
|
from { background-color: rgba(0,0,0,0.5); }
|
|
to { background-color: rgba(0,0,0,0); }
|
|
}
|
|
|
|
// Scale Out
|
|
// Scale from hero (1 in this case) to zero
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes scaleOut {
|
|
from { -webkit-transform: scale(1); opacity: 1; }
|
|
to { -webkit-transform: scale(0.8); opacity: 0; }
|
|
}
|
|
@-moz-keyframes scaleOut {
|
|
from { -moz-transform: scale(1); opacity: 1; }
|
|
to { -moz-transform: scale(0.8); opacity: 0; }
|
|
}
|
|
@keyframes scaleOut {
|
|
from { transform: scale(1); opacity: 1; }
|
|
to { transform: scale(0.8); opacity: 0; }
|
|
}
|
|
|
|
// Scale In
|
|
// Scale from 0 to hero (1 in this case)
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes scaleIn {
|
|
from { -webkit-transform: scale(0); }
|
|
to { -webkit-transform: scale(1); }
|
|
}
|
|
@-moz-keyframes scaleIn {
|
|
from { -moz-transform: scale(0); }
|
|
to { -moz-transform: scale(1); }
|
|
}
|
|
@keyframes scaleIn {
|
|
from { transform: scale(0); }
|
|
to { transform: scale(1); }
|
|
}
|
|
|
|
// Super Scale In
|
|
// Scale from super (1.x) to duper (1 in this case)
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes superScaleIn {
|
|
from { -webkit-transform: scale(1.2); opacity: 0; }
|
|
to { -webkit-transform: scale(1); opacity: 1 }
|
|
}
|
|
@-moz-keyframes superScaleIn {
|
|
from { -moz-transform: scale(1.2); opacity: 0; }
|
|
to { -moz-transform: scale(1); opacity: 1; }
|
|
}
|
|
@keyframes superScaleIn {
|
|
from { transform: scale(1.2); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
// Spin
|
|
// -------------------------------
|
|
|
|
@-webkit-keyframes spin {
|
|
100% { -webkit-transform: rotate(360deg); }
|
|
}
|
|
@-moz-keyframes spin {
|
|
100% { -moz-transform: rotate(360deg); }
|
|
}
|
|
@keyframes spin {
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.no-animation {
|
|
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
|
@include transition(none);
|
|
}
|
|
}
|
|
.noop-animation {
|
|
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
|
@include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-duration);
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
|
|
// required for Android
|
|
.ng-animate .pane {
|
|
position: absolute;
|
|
}
|
|
|
|
|
|
/**
|
|
* Slide Left-Right, and Right-Left, each with the reserve
|
|
* --------------------------------------------------
|
|
* NEW content slides IN from the RIGHT, OLD slides OUT to the LEFT
|
|
* Reverse: NEW content slides IN from the LEFT, OLD slides OUT to the RIGHT
|
|
*/
|
|
|
|
.slide-left-right,
|
|
.slide-right-left.reverse {
|
|
> .ng-enter, &.ng-enter,
|
|
> .ng-leave, &.ng-leave {
|
|
@include transition(all ease-in-out $transition-duration);
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
> .ng-enter, &.ng-enter {
|
|
/* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
|
|
@include translate3d(100%, 0, 0);
|
|
}
|
|
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
|
/* NEW content ACTIVELY sliding IN from the RIGHT */
|
|
@include translate3d(0, 0, 0);
|
|
}
|
|
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
|
/* OLD content ACTIVELY sliding OUT to the LEFT */
|
|
@include translate3d(-100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
.slide-left-right.reverse,
|
|
.slide-right-left {
|
|
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
|
@include transition(all ease-in-out $transition-duration);
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
> .ng-enter, &.ng-enter {
|
|
/* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
|
|
@include translate3d(-100%, 0, 0);
|
|
}
|
|
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
|
/* NEW content ACTIVELY sliding IN from the LEFT */
|
|
@include translate3d(0, 0, 0);
|
|
}
|
|
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
|
/* OLD content ACTIVELY sliding OUT to the RIGHT */
|
|
@include translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* iOS7 style slide left to right
|
|
* --------------------------------------------------
|
|
*/
|
|
$ios7-timing-function: ease-in-out;
|
|
$ios7-transition-duration: 250ms;
|
|
|
|
.slide-left-right-ios7,
|
|
.slide-right-left-ios7.reverse {
|
|
> .ng-enter, &.ng-enter,
|
|
> .ng-leave, &.ng-leave {
|
|
@include transition(all $ios7-timing-function $ios7-transition-duration);
|
|
position: absolute;
|
|
top: 0;
|
|
right: -1px;
|
|
bottom: 0;
|
|
left: -1px;
|
|
width: auto;
|
|
border-right: 1px solid #ddd;
|
|
border-left: 1px solid #ddd;
|
|
}
|
|
> .ng-enter, &.ng-enter {
|
|
/* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
|
|
@include translate3d(100%, 0, 0);
|
|
}
|
|
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
|
/* NEW content ACTIVELY sliding IN from the RIGHT */
|
|
@include translate3d(0, 0, 0);
|
|
}
|
|
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
|
/* OLD content ACTIVELY sliding OUT to the LEFT */
|
|
@include translate3d(-15%, 0, 0);
|
|
}
|
|
}
|
|
.slide-left-right-ios7.reverse,
|
|
.slide-right-left-ios7 {
|
|
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
|
@include transition(all $ios7-timing-function $ios7-transition-duration);
|
|
position: absolute;
|
|
top: 0;
|
|
right: -1px;
|
|
bottom: 0;
|
|
left: -1px;
|
|
width: auto;
|
|
border-right: 1px solid #ddd;
|
|
border-left: 1px solid #ddd;
|
|
}
|
|
> .ng-enter, &.ng-enter {
|
|
/* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
|
|
@include translate3d(-100%, 0, 0);
|
|
}
|
|
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
|
/* NEW content ACTIVELY sliding IN from the LEFT */
|
|
@include translate3d(0, 0, 0);
|
|
}
|
|
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
|
/* OLD content ACTIVELY sliding OUT to the RIGHT */
|
|
@include translate3d(15%, 0, 0);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.slide-in-left {
|
|
@include translate3d(0%,0,0);
|
|
&.ng-enter, > .ng-enter {
|
|
@include animation-name(slideInFromLeft);
|
|
@include animation-duration($transition-duration);
|
|
@include animation-timing-function(ease-in-out);
|
|
@include animation-fill-mode(both);
|
|
}
|
|
&.ng-leave, > .ng-leave {
|
|
@include animation-name(slideOutToLeft);
|
|
@include animation-duration($transition-duration);
|
|
@include animation-timing-function(ease-in-out);
|
|
@include animation-fill-mode(both);
|
|
}
|
|
}
|
|
|
|
|
|
.slide-in-left-add {
|
|
@include translate3d(100%,0,0);
|
|
@include animation-duration($transition-duration);
|
|
@include animation-timing-function(ease-in-out);
|
|
@include animation-fill-mode(both);
|
|
}
|
|
.slide-in-left-add-active {
|
|
@include animation-name(slideInFromLeft);
|
|
}
|
|
|
|
.slide-out-left {
|
|
@include translate3d(-100%,0,0);
|
|
&.ng-enter, > .ng-enter {
|
|
@include animation-name(slideOutToLeft);
|
|
@include animation-duration($transition-duration);
|
|
@include animation-timing-function(ease-in-out);
|
|
@include animation-fill-mode(both);
|
|
}
|
|
&.ng-leave, > .ng-leave {
|
|
@include animation-name(slideOutToLeft);
|
|
@include animation-duration($transition-duration);
|
|
@include animation-timing-function(ease-in-out);
|
|
@include animation-fill-mode(both);
|
|
}
|
|
}
|
|
|
|
.slide-out-left {
|
|
}
|
|
|
|
.slide-out-left-add {
|
|
@include translate3d(0,0,0);
|
|
@include animation-duration($transition-duration);
|
|
@include animation-timing-function(ease-in-out);
|
|
@include animation-fill-mode(both);
|
|
}
|
|
.slide-out-left-add-active {
|
|
@include animation-name(slideOutToLeft);
|
|
}
|
|
|
|
.slide-in-right {
|
|
@include translate3d(0%,0,0);
|
|
&.ng-enter, > .ng-enter {
|
|
@include animation-name(slideInFromRight);
|
|
@include animation-duration($transition-duration);
|
|
@include animation-timing-function(ease-in-out);
|
|
@include animation-fill-mode(both);
|
|
}
|
|
&.ng-leave, > .ng-leave {
|
|
@include animation-name(slideInFromRight);
|
|
@include animation-duration($transition-duration);
|
|
@include animation-timing-function(ease-in-out);
|
|
@include animation-fill-mode(both);
|
|
}
|
|
}
|
|
|
|
.slide-in-right-add {
|
|
@include translate3d(-100%,0,0);
|
|
@include animation-duration($transition-duration);
|
|
@include animation-timing-function(ease-in-out);
|
|
@include animation-fill-mode(both);
|
|
}
|
|
.slide-in-right-add-active {
|
|
@include animation-name(slideInFromRight);
|
|
}
|
|
|
|
.slide-out-right {
|
|
@include translate3d(100%,0,0);
|
|
&.ng-enter, > .ng-enter {
|
|
@include animation-name(slideOutToRight);
|
|
@include animation-duration($transition-duration);
|
|
@include animation-timing-function(ease-in-out);
|
|
@include animation-fill-mode(both);
|
|
}
|
|
&.ng-leave, > .ng-leave {
|
|
@include animation-name(slideOutToRight);
|
|
@include animation-duration($transition-duration);
|
|
@include animation-timing-function(ease-in-out);
|
|
@include animation-fill-mode(both);
|
|
}
|
|
}
|
|
|
|
.slide-out-right-add {
|
|
@include translate3d(0,0,0);
|
|
@include animation-duration($transition-duration);
|
|
@include animation-timing-function(ease-in-out);
|
|
@include animation-fill-mode(both);
|
|
}
|
|
.slide-out-right-add-active {
|
|
@include animation-name(slideOutToRight);
|
|
}
|
|
|
|
|
|
/**
|
|
* Slide up from the bottom, used for modals
|
|
* --------------------------------------------------
|
|
*/
|
|
|
|
.slide-in-up {
|
|
@include translate3d(0, 100%, 0);
|
|
}
|
|
.slide-in-up.ng-enter,
|
|
.slide-in-up > .ng-enter {
|
|
@include transition(all $slide-in-up-function 400ms);
|
|
}
|
|
.slide-in-up.ng-enter-active,
|
|
.slide-in-up > .ng-enter-active {
|
|
@include translate3d(0, 0, 0);
|
|
}
|
|
|
|
.slide-in-up.ng-leave,
|
|
.slide-in-up > .ng-leave {
|
|
@include transition(all ease-in-out 250ms);
|
|
}
|
|
|
|
|
|
.fade-in {
|
|
@include animation(fadeOut 0.3s);
|
|
&.active {
|
|
@include animation(fadeIn 0.3s);
|
|
}
|
|
}
|
|
|
|
.fade-in-not-out {
|
|
&.ng-enter, .ng-enter {
|
|
@include animation(fadeIn 0.3s);
|
|
position: relative;
|
|
}
|
|
&.ng-leave, .ng-leave {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Some component specific animations
|
|
*/
|
|
$nav-title-slide-ios7-delay: 250ms;
|
|
.nav-title-slide-ios7 {
|
|
> .ng-enter, &.ng-enter,
|
|
> .ng-leave, &.ng-leave {
|
|
@include transition(all $nav-title-slide-ios7-delay);
|
|
@include transition-timing-function($ios7-timing-function);
|
|
opacity: 1;
|
|
}
|
|
> .ng-enter, &.ng-enter {
|
|
@include translate3d(30%, 0, 0);
|
|
opacity: 0;
|
|
}
|
|
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
|
@include translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
|
@include translate3d(-30%, 0, 0);
|
|
opacity: 0;
|
|
}
|
|
|
|
&.reverse {
|
|
> .ng-enter, &.ng-enter,
|
|
> .ng-leave, &.ng-leave {
|
|
@include transition(all ease-in-out $transition-duration);
|
|
opacity: 1;
|
|
}
|
|
> .ng-enter, &.ng-enter {
|
|
@include translate3d(-30%, 0, 0);
|
|
opacity: 0;
|
|
}
|
|
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
|
@include translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
|
@include translate3d(30%, 0, 0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|