Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-10 09:21:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

brought back a full flip transition for 3d supporting browsers, using 90deg pairs. Needs further testing

Browse source
This commit is contained in:
scottjehl 2012-01-05 14:55:45 +07:00
parent 7341d7c9d0
commit f6ec2436b7
1 changed files with 30 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
css/structure/jquery.mobile.transitions.flip.css
View file

@ -10,66 +10,72 @@
-moz-perspective: 1000;
position: absolute;
}
.ui-supported-csstransform3d .flip {
-webkit-animation-duration: .65s;
-webkit-backface-visibility:hidden;
-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-moz-animation-duration: .65s;
-moz-backface-visibility:hidden;
-moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
}
.ui-supported-csstransform3d .flip.out {
-webkit-transform: rotateY(-180deg) scale(.8);
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
-moz-transform: rotateY(-180deg) scale(.8);
-moz-transform: rotateY(-90deg) scale(.9);
-moz-animation-name: flipouttoleft;
}
.ui-supported-csstransform3d .flip.in {
opacity: 1;
z-index: 10;
-webkit-animation-duration: 150ms;
-webkit-animation-name: fadein;
-moz-animation-duration: 150ms;
-moz-animation-name: fadein;
-webkit-animation-name: flipintoright;
-moz-animation-name: flipintoright;
}
.ui-supported-csstransform3d .flip.out.reverse {
-webkit-transform: rotateY(180deg) scale(.8);
-webkit-transform: rotateY(90deg) scale(.9);
-webkit-animation-name: flipouttoright;
-moz-transform: rotateY(180deg) scale(.8);
-moz-transform: rotateY(90deg) scale(.9);
-moz-animation-name: flipouttoright;
}
.ui-supported-csstransform3d .flip.in.reverse {
opacity: 1;
z-index: 10;
-webkit-animation-duration: 300ms;
-webkit-animation-name: fadein;
-moz-animation-duration: 300ms;
-moz-animation-name: fadein;
-webkit-animation-name: flipintoleft;
-moz-animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-180deg); }
to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@-moz-keyframes flipouttoleft {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(-180deg); }
to { -moz-transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
from { -webkit-transform: rotateY(0) ; }
to { -webkit-transform: rotateY(180deg); }
to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@-moz-keyframes flipouttoright {
from { -moz-transform: rotateY(0) ; }
to { -moz-transform: rotateY(180deg) ; }
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
from { -webkit-transform: rotateY(-90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoleft {
from { -moz-transform: rotateY(-90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
from { -webkit-transform: rotateY(90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoright {
from { -moz-transform: rotateY(90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
/* for non-3d supporting browsers, fallback to fade */