jce-mobile-app/www/lib/ionic/scss/_transitions.scss

164 lines
3.4 KiB
SCSS
Raw Normal View History

2015-01-10 22:11:51 +00:00
// iOS View Transitions
// -------------------------------
$ios-transition-duration: 450ms !default;
$ios-transition-timing-function: cubic-bezier(.3, .9, .4, 1) !default;
$ios-transition-container-bg-color: #000 !default;
[nav-view-transition="ios"] {
[nav-view="entering"],
[nav-view="leaving"] {
@include transition-duration( $ios-transition-duration );
@include transition-timing-function( $ios-transition-timing-function );
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
}
&[nav-view-direction="forward"],
&[nav-view-direction="back"] {
background-color: $ios-transition-container-bg-color;
}
[nav-view="active"],
&[nav-view-direction="forward"] [nav-view="entering"],
&[nav-view-direction="back"] [nav-view="leaving"] {
z-index: $z-index-view-above;
}
&[nav-view-direction="back"] [nav-view="entering"],
&[nav-view-direction="forward"] [nav-view="leaving"] {
z-index: $z-index-view-below;
}
}
// iOS Nav Bar Transitions
// -------------------------------
[nav-bar-transition="ios"] {
.title,
.buttons,
.back-text {
@include transition-duration( $ios-transition-duration );
@include transition-timing-function( $ios-transition-timing-function );
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
}
[nav-bar="active"],
[nav-bar="entering"] {
z-index: $z-index-bar-above;
.bar {
background: transparent;
}
}
[nav-bar="cached"] {
display: block;
.header-item {
display: none;
}
}
}
// Android View Transitions
// -------------------------------
$android-transition-duration: 200ms !default;
$android-transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1) !default;
[nav-view-transition="android"] {
[nav-view="entering"],
[nav-view="leaving"] {
@include transition-duration( $android-transition-duration );
@include transition-timing-function( $android-transition-timing-function );
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
[nav-view="active"],
&[nav-view-direction="forward"] [nav-view="entering"],
&[nav-view-direction="back"] [nav-view="leaving"] {
z-index: $z-index-view-above;
}
&[nav-view-direction="back"] [nav-view="entering"],
&[nav-view-direction="forward"] [nav-view="leaving"] {
z-index: $z-index-view-below;
}
}
// Android Nav Bar Transitions
// -------------------------------
[nav-bar-transition="android"] {
.title,
.buttons {
@include transition-duration( $android-transition-duration );
@include transition-timing-function( $android-transition-timing-function );
-webkit-transition-property: opacity;
transition-property: opacity;
}
[nav-bar="active"],
[nav-bar="entering"] {
z-index: $z-index-bar-above;
.bar {
background: transparent;
}
}
[nav-bar="cached"] {
display: block;
.header-item {
display: none;
}
}
}
// Transition Settings
// -------------------------------
[nav-view="cached"],
[nav-bar="cached"] {
display: none;
}
[nav-view="stage"] {
opacity: 0;
@include transition-duration( 0 );
}
[nav-bar="stage"] {
.title,
.buttons,
.back-text {
position: absolute;
opacity: 0;
@include transition-duration(0s);
}
}