javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Better animation for modals in separate animations file.

Browse Source
This commit is contained in:
Max Lynch
2013-10-04 20:56:21 -05:00
parent 1f2619f6f8
commit 0f9c8c92fd
3 changed files with 27 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
dist/ionic-ios7.css vendored
View File

@ -2265,64 +2265,20 @@ a.button {
.card-footer { .card-footer {
padding: 10px; } padding: 10px; }
/* .slide-in-up {
.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;
}
*/
@-webkit-keyframes slide-in-up {
0% {
opacity: 0; opacity: 0;
-webkit-transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
transition: -webkit-transform 0.25s, opacity 0.25s;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
5% { .slide-in-up.active {
opacity: 1; }
100% {
opacity: 1; opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@-webkit-keyframes slide-in-down {
0% {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } transform: translate3d(0, 0, 0); }
95% {
opacity: 0; }
100% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
.slide-in-up {
/*
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
animation: slide-in-down 0.5s;
-webkit-animation: slide-in-down 0.5s;
-webkit-animation-timing-function: $bezier-function;
*/ }
/*
-webkit-animation: slide-in-up 0.5s;
-webkit-animation-direction: reverse;
}
*/
.slide-in-up.active {
/*
animation: slide-in-up 0.5s;
-webkit-animation: slide-in-up 0.5s;
-webkit-animation-fill-mode: forwards;
*/ }
@keyframes fadein { @keyframes fadein {
from { from {
opacity: 0; } opacity: 0; }

58
dist/ionic.css vendored
View File

@ -2317,64 +2317,20 @@ a.button {
.card-footer { .card-footer {
padding: 10px; } padding: 10px; }
/* .slide-in-up {
.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;
}
*/
@-webkit-keyframes slide-in-up {
0% {
opacity: 0; opacity: 0;
-webkit-transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
transition: -webkit-transform 0.25s, opacity 0.25s;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
5% { .slide-in-up.active {
opacity: 1; }
100% {
opacity: 1; opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@-webkit-keyframes slide-in-down {
0% {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } transform: translate3d(0, 0, 0); }
95% {
opacity: 0; }
100% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
.slide-in-up {
/*
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
animation: slide-in-down 0.5s;
-webkit-animation: slide-in-down 0.5s;
-webkit-animation-timing-function: $bezier-function;
*/ }
/*
-webkit-animation: slide-in-up 0.5s;
-webkit-animation-direction: reverse;
}
*/
.slide-in-up.active {
/*
animation: slide-in-up 0.5s;
-webkit-animation: slide-in-up 0.5s;
-webkit-animation-fill-mode: forwards;
*/ }
@keyframes fadein { @keyframes fadein {
from { from {
opacity: 0; } opacity: 0; }

66
scss/ionic/_animations.scss
View File

@ -1,69 +1,21 @@
$bezier-function: cubic-bezier(.1, .7, .1, 1); $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;
}
*/
@-webkit-keyframes slide-in-up {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
5% {
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes slide-in-down {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
95% {
opacity: 0;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.slide-in-up { .slide-in-up {
/* // Start hidden
opacity: 0; opacity: 0;
// Start it down low
-webkit-transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
animation: slide-in-down 0.5s; -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
-webkit-animation: slide-in-down 0.5s; transition: -webkit-transform 0.25s, opacity 0.25s;
-webkit-animation-timing-function: $bezier-function; -webkit-transition-timing-function: $bezier-function;
*/ transition-timing-function: $bezier-function;
} }
/*
-webkit-animation: slide-in-up 0.5s;
-webkit-animation-direction: reverse;
}
*/
.slide-in-up.active { .slide-in-up.active {
/* opacity: 1;
animation: slide-in-up 0.5s; -webkit-transform: translate3d(0, 0, 0);
-webkit-animation: slide-in-up 0.5s; transform: translate3d(0, 0, 0);
-webkit-animation-fill-mode: forwards;
*/
} }
@keyframes fadein { @keyframes fadein {