_transitions.scss 3.8 KB

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