1
  2// iOS View Transitions
  3// -------------------------------
  4
  5$ios-transition-duration:              500ms !default;
  6$ios-transition-timing-function:       cubic-bezier(.36, .66, .04, 1) !default;
  7$ios-transition-container-bg-color:    #000 !default;
  8
  9
 10[nav-view-transition="ios"] {
 11
 12  [nav-view="entering"],
 13  [nav-view="leaving"] {
 14    @include transition-duration( $ios-transition-duration );
 15    @include transition-timing-function( $ios-transition-timing-function );
 16    -webkit-transition-property: opacity, -webkit-transform, box-shadow;
 17            transition-property: opacity, transform, box-shadow;
 18  }
 19
 20  &[nav-view-direction="forward"],
 21  &[nav-view-direction="back"] {
 22    background-color: $ios-transition-container-bg-color;
 23  }
 24
 25  [nav-view="active"],
 26  &[nav-view-direction="forward"] [nav-view="entering"],
 27  &[nav-view-direction="back"] [nav-view="leaving"] {
 28    z-index: $z-index-view-above;
 29  }
 30
 31  &[nav-view-direction="back"] [nav-view="entering"],
 32  &[nav-view-direction="forward"] [nav-view="leaving"] {
 33    z-index: $z-index-view-below;
 34  }
 35
 36}
 37
 38
 39
 40// iOS Nav Bar Transitions
 41// -------------------------------
 42
 43[nav-bar-transition="ios"] {
 44
 45  .title,
 46  .buttons,
 47  .back-text {
 48    @include transition-duration( $ios-transition-duration );
 49    @include transition-timing-function( $ios-transition-timing-function );
 50    -webkit-transition-property: opacity, -webkit-transform;
 51            transition-property: opacity, transform;
 52  }
 53
 54  [nav-bar="active"],
 55  [nav-bar="entering"] {
 56    z-index: $z-index-bar-above;
 57
 58   .bar {
 59      background: transparent;
 60    }
 61  }
 62
 63  [nav-bar="cached"] {
 64    display: block;
 65
 66    .header-item {
 67      display: none;
 68    }
 69  }
 70
 71}
 72
 73
 74
 75// Android View Transitions
 76// -------------------------------
 77
 78$android-transition-duration:             200ms !default;
 79$android-transition-timing-function:      cubic-bezier(0.4, 0.6, 0.2, 1) !default;
 80
 81
 82[nav-view-transition="android"] {
 83
 84  [nav-view="entering"],
 85  [nav-view="leaving"] {
 86    @include transition-duration( $android-transition-duration );
 87    @include transition-timing-function( $android-transition-timing-function );
 88    -webkit-transition-property: -webkit-transform;
 89            transition-property: transform;
 90  }
 91
 92  [nav-view="active"],
 93  &[nav-view-direction="forward"] [nav-view="entering"],
 94  &[nav-view-direction="back"] [nav-view="leaving"] {
 95    z-index: $z-index-view-above;
 96  }
 97
 98  &[nav-view-direction="back"] [nav-view="entering"],
 99  &[nav-view-direction="forward"] [nav-view="leaving"] {
100    z-index: $z-index-view-below;
101  }
102
103}
104
105
106
107// Android Nav Bar Transitions
108// -------------------------------
109
110[nav-bar-transition="android"] {
111
112  .title,
113  .buttons {
114    @include transition-duration( $android-transition-duration );
115    @include transition-timing-function( $android-transition-timing-function );
116    -webkit-transition-property: opacity;
117            transition-property: opacity;
118  }
119
120  [nav-bar="active"],
121  [nav-bar="entering"] {
122    z-index: $z-index-bar-above;
123
124   .bar {
125      background: transparent;
126    }
127  }
128
129  [nav-bar="cached"] {
130    display: block;
131
132    .header-item {
133      display: none;
134    }
135  }
136
137}
138
139
140
141// Nav Swipe
142// -------------------------------
143
144[nav-swipe="fast"] {
145  [nav-view],
146  .title,
147  .buttons,
148  .back-text {
149    @include transition-duration(50ms);
150    @include transition-timing-function(linear);
151  }
152}
153
154[nav-swipe="slow"] {
155  [nav-view],
156  .title,
157  .buttons,
158  .back-text {
159    @include transition-duration(160ms);
160    @include transition-timing-function(linear);
161  }
162}
163
164
165
166// Transition Settings
167// -------------------------------
168
169[nav-view="cached"],
170[nav-bar="cached"] {
171  display: none;
172}
173
174[nav-view="stage"] {
175  opacity: 0;
176  @include transition-duration( 0 );
177}
178
179[nav-bar="stage"] {
180  .title,
181  .buttons,
182  .back-text {
183    position: absolute;
184    opacity: 0;
185    @include transition-duration(0s);
186  }
187}
188