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

use mixins for animations

Browse Source
This commit is contained in:
Adam Bradley
2013-11-26 23:29:41 -06:00
parent f5b18cec40
commit 4b08a9362c
2 changed files with 74 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
dist/css/ionic.css vendored
View File

@@ -2543,49 +2543,83 @@ a.subdued {
background-color: rgba(0, 0, 0, 0); }
.action-sheet-backdrop.active {
-webkit-animation: fadeInHalf 0.3s;
-moz-animation: fadeInHalf 0.3s;
animation: fadeInHalf 0.3s;
-webkit-animation-fill-mode: both; }
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
.action-sheet-backdrop.active-remove {
background-color: rgba(0, 0, 0, 0.5);
-webkit-animation: fadeOutHalf 0.3s;
-moz-animation: fadeOutHalf 0.3s;
animation: fadeOutHalf 0.3s;
-webkit-animation-fill-mode: both; }
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
background-color: rgba(0, 0, 0, 0.5); }
@-webkit-keyframes actionSheetUp {
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 actionSheetOut {
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; } }
.action-sheet-up {
opacity: 1;
-webkit-transform: translate3d(0, 0%, 0); }
-webkit-transform: translate3d(0, 0%, 0);
-moz-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
opacity: 1; }
.action-sheet-up.ng-enter, .action-sheet-up .ng-enter {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-animation-duration: 400ms;
-moz-animation-duration: 400ms;
animation-duration: 400ms;
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
-moz-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-moz-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
opacity: 0; }
.action-sheet-up.ng-enter-active, .action-sheet-up .ng-enter-active {
-webkit-animation-name: actionSheetUp; }
-webkit-animation-name: actionSheetUp;
-moz-animation-name: actionSheetUp;
animation-name: actionSheetUp; }
.action-sheet-up.ng-leave, .action-sheet-up .ng-leave {
-webkit-animation-duration: 400ms;
-moz-animation-duration: 400ms;
animation-duration: 400ms;
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
-moz-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-moz-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
.action-sheet-up.ng-leave-active, .action-sheet-up .ng-leave {
-webkit-animation-name: actionSheetOut; }
-webkit-animation-name: actionSheetOut;
-moz-animation-name: actionSheetOut;
animation-name: actionSheetOut; }
.action-sheet {
position: fixed;
@@ -2607,17 +2641,17 @@ a.subdued {
.action-sheet-title {
padding: 10px;
color: #666666;
text-align: center;
font-size: 12px;
color: #666666; }
font-size: 12px; }
.action-sheet-group {
background-color: #fff;
margin-bottom: 5px;
border-radius: 3px 3px 3px 3px; }
border-radius: 3px 3px 3px 3px;
background-color: #fff; }
.action-sheet-group .button {
border-radius: 0;
border-width: 1px 0px 0px 0px; }
border-width: 1px 0px 0px 0px;
border-radius: 0; }
.action-sheet-group .button.active, .action-sheet-group .button:active {
background-color: transparent;
color: inherit; }

53
scss/_action-sheet.scss
View File

@@ -30,76 +30,71 @@
background-color: rgba(0,0,0,0);
&.active {
-webkit-animation: fadeInHalf 0.3s;
animation: fadeInHalf 0.3s;
-webkit-animation-fill-mode: both;
@include animation(fadeInHalf 0.3s);
@include animation-fill-mode(both);
}
&.active-remove {
@include animation(fadeOutHalf 0.3s);
@include animation-fill-mode(both);
background-color: rgba(0,0,0,0.5);
-webkit-animation: fadeOutHalf 0.3s;
animation: fadeOutHalf 0.3s;
-webkit-animation-fill-mode: both;
}
}
@-webkit-keyframes actionSheetUp {
0% {
-webkit-transform: translate3d(0, 100%, 0);
@include translate3d(0, 100%, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
@include translate3d(0, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes actionSheetOut {
0% {
-webkit-transform: translate3d(0, 0, 0);
@include translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, 100%, 0);
@include translate3d(0, 100%, 0);
opacity: 0;
}
}
$slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
.action-sheet-up {
opacity: 1;
// Start it down low
-webkit-transform: translate3d(0, 0%, 0);
@include translate3d(0, 0%, 0);
opacity: 1;
&.ng-enter, .ng-enter {
// Start it down low
@include translate3d(0, 100%, 0);
@include animation-duration(400ms);
@include animation-fill-mode(both);
@include animation-timing-function($slide-in-up-function);
// 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: actionSheetUp;
@include animation-name(actionSheetUp);
}
&.ng-leave, .ng-leave {
-webkit-animation-duration: 400ms;
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: $slide-in-up-function;
@include animation-duration(400ms);
@include animation-fill-mode(both);
@include animation-timing-function($slide-in-up-function);
}
&.ng-leave-active, .ng-leave {
-webkit-animation-name: actionSheetOut;
@include animation-name(actionSheetOut);
}
}
.action-sheet {
position: fixed;
bottom: 0;
left: 15px;
@@ -126,18 +121,18 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
.action-sheet-title {
padding: 10px;
color: lighten($base-color, 40%);
text-align: center;
font-size: 12px;
color: lighten($base-color, 40%);
}
.action-sheet-group {
background-color: #fff;
margin-bottom: 5px;
border-radius: $sheet-border-radius;
background-color: #fff;
.button {
border-radius: 0;
border-width: 1px 0px 0px 0px;
border-radius: 0;
&.active, &:active {
background-color: transparent;