javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed #248 - modal animation

Browse Source
This commit is contained in:
Max Lynch
2013-12-04 12:02:30 -06:00
parent 6f3f36917f
commit bf7b1b2134
2 changed files with 47 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
dist/css/ionic.css vendored
View File

@@ -5113,6 +5113,32 @@ a.button {
* Keyframes
* --------------------------------------------------
*/
@-webkit-keyframes slideInUp {
0% {
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
opacity: 0; }
100% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1; } }
@-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1; }
100% {
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
opacity: 0; } }
@-webkit-keyframes slideInFromLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0); }

21
scss/_animations.scss
View File

@@ -14,6 +14,27 @@
* --------------------------------------------------
*/
$slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
@-webkit-keyframes slideInUp {
0% {
@include translate3d(0, 100%, 0);
opacity: 0;
}
100% {
@include translate3d(0, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes slideOutUp {
0% {
@include translate3d(0, 0, 0);
opacity: 1;
}
100% {
@include translate3d(0, 100%, 0);
opacity: 0;
}
}
// Slide In From Left
// -------------------------------