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

Sexy title anim

Browse Source
This commit is contained in:
Max Lynch
2013-11-19 12:07:58 -06:00
parent 26371a0c85
commit 6ac1830f98
5 changed files with 294 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
dist/css/ionic.css vendored
View File

@@ -2934,8 +2934,7 @@ a.button {
-webkit-transform: translate3d(0, 0, 0); }
.slide-left-right > .ng-leave.ng-leave-active, .slide-left-right.ng-leave.ng-leave-active {
-webkit-transform: translate3d(-100%, 0, 0); }
.slide-left-right-reverse > .ng-enter, .slide-left-right-reverse.ng-enter, .slide-left-right-reverse > .ng-leave, .slide-left-right-reverse.ng-leave {
.slide-left-right.reverse > .ng-enter, .slide-left-right.reverse.ng-enter, .slide-left-right.reverse > .ng-leave, .slide-left-right.reverse.ng-leave {
position: absolute;
top: 0;
left: 0;
@@ -2943,11 +2942,11 @@ a.button {
bottom: 0;
-webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms; }
.slide-left-right-reverse > .ng-enter, .slide-left-right-reverse.ng-enter {
.slide-left-right.reverse > .ng-enter, .slide-left-right.reverse.ng-enter {
-webkit-transform: translate3d(-100%, 0, 0); }
.slide-left-right-reverse > .ng-enter.ng-enter-active, .slide-left-right-reverse.ng-enter.ng-enter-active {
.slide-left-right.reverse > .ng-enter.ng-enter-active, .slide-left-right.reverse.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0); }
.slide-left-right-reverse > .ng-leave.ng-leave-active, .slide-left-right-reverse.ng-leave.ng-leave-active {
.slide-left-right.reverse > .ng-leave.ng-leave-active, .slide-left-right.reverse.ng-leave.ng-leave-active {
-webkit-transform: translate3d(100%, 0, 0); }
.slide-left-right-ios7 > .ng-enter, .slide-left-right-ios7.ng-enter, .slide-left-right-ios7 > .ng-leave, .slide-left-right-ios7.ng-leave {
@@ -2968,8 +2967,7 @@ a.button {
-webkit-transform: translate3d(0, 0, 0); }
.slide-left-right-ios7 > .ng-leave.ng-leave-active, .slide-left-right-ios7.ng-leave.ng-leave-active {
-webkit-transform: translate3d(-20%, 0, 0); }
.slide-left-right-ios7-reverse > .ng-enter, .slide-left-right-ios7-reverse.ng-enter, .slide-left-right-ios7-reverse > .ng-leave, .slide-left-right-ios7-reverse.ng-leave {
.slide-left-right-ios7.reverse > .ng-enter, .slide-left-right-ios7.reverse.ng-enter, .slide-left-right-ios7.reverse > .ng-leave, .slide-left-right-ios7.reverse.ng-leave {
position: absolute;
top: 0;
left: 0;
@@ -2979,11 +2977,11 @@ a.button {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
.slide-left-right-ios7-reverse > .ng-enter, .slide-left-right-ios7-reverse.ng-enter {
.slide-left-right-ios7.reverse > .ng-enter, .slide-left-right-ios7.reverse.ng-enter {
-webkit-transform: translate3d(-20%, 0, 0); }
.slide-left-right-ios7-reverse > .ng-enter.ng-enter-active, .slide-left-right-ios7-reverse.ng-enter.ng-enter-active {
.slide-left-right-ios7.reverse > .ng-enter.ng-enter-active, .slide-left-right-ios7.reverse.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0); }
.slide-left-right-ios7-reverse > .ng-leave.ng-leave-active, .slide-left-right-ios7-reverse.ng-leave.ng-leave-active {
.slide-left-right-ios7.reverse > .ng-leave.ng-leave-active, .slide-left-right-ios7.reverse.ng-leave.ng-leave-active {
-webkit-transform: translate3d(100%, 0, 0); }
@-webkit-keyframes slideInLeft {
@@ -3209,6 +3207,43 @@ a.button {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
/**
* Some component specific animations
*/
.nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter, .nav-title-slide-ios7 > .ng-leave, .nav-title-slide-ios7.ng-leave {
-webkit-transition: all 250ms;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
transition: all 250ms;
transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
opacity: 1; }
.nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter {
opacity: 0;
-webkit-transform: translate3d(30%, 0, 0); }
.nav-title-slide-ios7 > .ng-enter.ng-enter-active, .nav-title-slide-ios7.ng-enter.ng-enter-active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0); }
.nav-title-slide-ios7 > .ng-leave.ng-leave-active, .nav-title-slide-ios7.ng-leave.ng-leave-active {
opacity: 0;
-webkit-transform: translate3d(-30%, 0, 0); }
.reverse .nav-title-slide-ios7 > .ng-enter, .reverse .nav-title-slide-ios7.ng-enter, .reverse .nav-title-slide-ios7 > .ng-leave, .reverse .nav-title-slide-ios7.ng-leave {
-webkit-transition: all 250ms;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
transition: all 250ms;
transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
opacity: 1; }
.reverse .nav-title-slide-ios7 > .ng-enter, .reverse .nav-title-slide-ios7.ng-enter {
opacity: 0;
-webkit-transform: translate3d(-30%, 0, 0); }
.reverse .nav-title-slide-ios7 > .ng-enter.ng-enter-active, .reverse .nav-title-slide-ios7.ng-enter.ng-enter-active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0); }
.reverse .nav-title-slide-ios7 > .ng-leave.ng-leave-active, .reverse .nav-title-slide-ios7.ng-leave.ng-leave-active {
opacity: 0;
-webkit-transform: translate3d(30%, 0, 0); }
/**
* Grid
* --------------------------------------------------