Merge pull request #12 from brewster1134/2.0.0_animation_refactor

2.0.0_animation_refactor

Author: brewster1134

CHANGELOG.md

@@ -1,5 +1,11 @@
 #### CHANGE LOG
 
+###### 2.0.0
+* new css api (now requires reverse class css for optional reverse support)
+* optimized animations
+* hardware-accelerated css animations
+* removed confusing reverse class convention
+
 ###### 1.0.4
 * allow passing a boolean for `goTo` method's animation argument
 

README.md

@@ -10,7 +10,6 @@
 
 Define several `.tiler-tile` elements inside a single `.tiler-viewport` element.
 * `tiler-animation` is the class that will be toggled to allow CSS animations or styles.
-* If you use custom reverse styles, you need to signify that to tiler by appeneding a `<` to the class name __(example below)__
 
 _Do __NOT__ add any additional classes to the `tiler-tile` elements.  They __WILL__ be overwritten._
 
@@ -19,10 +18,6 @@ _Do __NOT__ add any additional classes to the `tiler-tile` elements.  They __WIL
 <div class="tiler-viewport">
   <div class="tiler-tile" data-tiler-animation="slide-horizontal" id="tile-1"></div>
   <div class="tiler-tile" data-tiler-animation="slide-vertical" id="tile-2"></div>
-
-  <!-- note the `less-than` sign in the animation name -->
-  <!-- that means this animation has a custom reverse defined -->
-  <div class="tiler-tile" data-tiler-animation="fade<" id="tile-2"></div>
 </div>
 ```
 
@@ -55,7 +50,7 @@ Tiler animations can be easily defined with a simple convention in your CSS.
 * `start` the beginning state of a CSS animation
   * This property is treated like a reset. If you use multiple animations, you need to make sure this property will reset ALL styles a given tile may be involved with.  For example if you animate using `top`, but you are defining a new animation that animates with `left`, you still need to set `top` to `0` in case it was set to something else from a _different_ animation. __<sup>example below -1-</sup>__
 * `end`   the end state of a CSS animation
-* `reverse` tiler can automatically reverse animations by switching using `start` as the `end` state, and vice-versa.  If you need to customize the reverse, you can nest additional animations under a `reverse` class.  __<sup>example below -2-</sup>__
+* `reverse` If you need to customize the reverse animation, you can nest additional animations under a `reverse` class.  __<sup>example below -2-</sup>__
 * Only define `transition-property` on the specific animations, and only for the specific attributes you are animating. __<sup>example below -3-</sup>__
 
 ```sass
@@ -86,6 +81,19 @@ Tiler animations can be easily defined with a simple convention in your CSS.
       &.end
         left: -100%
 
+    // -2- reverse styles
+    &.reverse
+      &.enter
+        &.start
+          left: -100%
+        &.end
+          left: 0%
+      &.exit
+        &.start
+          left: 0%
+        &.end
+          left: 100%        
+
 // slide up (slide in from the bottom)
 &.slide-vertical
 
@@ -125,19 +133,6 @@ Tiler animations can be easily defined with a simple convention in your CSS.
       opacity: 1
     &.end
       opacity: 1
-
-  // -2- reverse styles for when using the `<` convention (e.g. `fade<`)
-  &.reverse
-    &.enter
-      &.start
-        opacity: 1
-      &.end
-        opacity: 1
-    &.exit
-      &.start
-        opacity: 1
-      &.end
-        opacity: 0
 ```
 
 ### Methods

demo/index.html

@@ -24,51 +24,51 @@ <h4>Background</h4>
       <div class="tiler-tile" id="tile-4" data-tiler-title="Tile 4"></div>
     </div>
 
-    <div class="tiler-viewport" id="slide-horizontal">
+    <div class="tiler-viewport" id="slide-horizontal" data-tiler-animation="slide-horizontal">
       <div class="buttons">
         <h4>Slide</h4>
         <button data-tiler-link="tile-1"></button>
         <button data-tiler-link="tile-2"></button>
         <button data-tiler-link="tile-3"></button>
         <button data-tiler-link="tile-4"></button>
       </div>
-      <div class="tiler-tile" id="tile-1" data-tiler-title="Tile 1" data-tiler-animation="slide-horizontal">
+      <div class="tiler-tile" id="tile-1" data-tiler-title="Tile 1">
         <span id="box-1"></span><span id="box-2"></span><span id="box-3"></span>
       </div>
-      <div class="tiler-tile" id="tile-2" data-tiler-title="Tile 2" data-tiler-animation="slide-vertical"></div>
-      <div class="tiler-tile" id="tile-3" data-tiler-title="Tile 3" data-tiler-animation="slide-horizontal"></div>
-      <div class="tiler-tile" id="tile-4" data-tiler-title="Tile 4" data-tiler-animation="slide-vertical"></div>
+      <div class="tiler-tile" id="tile-2" data-tiler-title="Tile 2"></div>
+      <div class="tiler-tile" id="tile-3" data-tiler-title="Tile 3"></div>
+      <div class="tiler-tile" id="tile-4" data-tiler-title="Tile 4"></div>
     </div>
 
-    <div class="tiler-viewport" id="fade">
+    <div class="tiler-viewport" id="fade" data-tiler-animation="fade">
       <div class="buttons">
         <h4>Fade</h4>
         <button data-tiler-link="tile-1"></button>
         <button data-tiler-link="tile-2"></button>
         <button data-tiler-link="tile-3"></button>
         <button data-tiler-link="tile-4"></button>
       </div>
-      <div class="tiler-tile" id="tile-1" data-tiler-title="Tile 1" data-tiler-animation="fade<">
+      <div class="tiler-tile" id="tile-1" data-tiler-title="Tile 1">
         <span id="box-1"></span><span id="box-2"></span><span id="box-3"></span>
       </div>
-      <div class="tiler-tile" id="tile-2" data-tiler-title="Tile 2" data-tiler-animation="fade<"></div>
-      <div class="tiler-tile" id="tile-3" data-tiler-title="Tile 3" data-tiler-animation="fade<"></div>
-      <div class="tiler-tile" id="tile-4" data-tiler-title="Tile 4" data-tiler-animation="fade<"></div>
+      <div class="tiler-tile" id="tile-2" data-tiler-title="Tile 2"></div>
+      <div class="tiler-tile" id="tile-3" data-tiler-title="Tile 3"></div>
+      <div class="tiler-tile" id="tile-4" data-tiler-title="Tile 4"></div>
     </div>
 
-    <div class="tiler-viewport" id="slide-vertical">
+    <div class="tiler-viewport" id="mixed">
       <div class="buttons">
         <h4>Mixed</h4>
         <button data-tiler-link="tile-1"></button>
         <button data-tiler-link="tile-2"></button>
         <button data-tiler-link="tile-3"></button>
         <button data-tiler-link="tile-4"></button>
       </div>
-      <div class="tiler-tile" id="tile-1" data-tiler-title="Tile 1" data-tiler-animation="fade<">
+      <div class="tiler-tile" id="tile-1" data-tiler-title="Tile 1" data-tiler-animation="fade">
         <span id="box-1"></span><span id="box-2"></span><span id="box-3"></span>
       </div>
       <div class="tiler-tile" id="tile-2" data-tiler-title="Tile 2" data-tiler-animation="slide-vertical"></div>
-      <div class="tiler-tile" id="tile-3" data-tiler-title="Tile 3" data-tiler-animation="fade<"></div>
+      <div class="tiler-tile" id="tile-3" data-tiler-title="Tile 3" data-tiler-animation="fade"></div>
       <div class="tiler-tile" id="tile-4" data-tiler-title="Tile 4" data-tiler-animation="slide-horizontal"></div>
     </div>
   </body>

demo/tiler_demo.css

@@ -16,15 +16,14 @@ html, body {
     background-position: 0% 100%;
     background-size: auto; }
     .tiler-viewport#background .tiler-tile {
-      background: transparent !important; }
+      background: transparent; }
   .tiler-viewport .buttons {
     position: absolute;
     z-index: 3;
     right: 0;
     top: 0; }
   .tiler-viewport .tiler-tile {
-    background-position: center;
-    transition-duration: 0.25s !important; }
+    background-position: center; }
     .tiler-viewport .tiler-tile#tile-1 {
       background-image: url(mountain.jpg); }
     .tiler-viewport .tiler-tile#tile-2 {

demo/tiler_demo.sass

@@ -17,7 +17,7 @@ html, body
     background-position: 0% 100%
     background-size: auto
     .tiler-tile
-      background: transparent !important
+      background: transparent
 
   .buttons
     position: absolute
@@ -27,7 +27,6 @@ html, body
 
   .tiler-tile
     background-position: center
-    transition-duration: 0.25s !important
     &#tile-1
       background-image: url(mountain.jpg)
     &#tile-2

lib/tiler-animations.css

@@ -1,5 +1,6 @@
 .tiler-tile {
-  transition-timing-function: linear; }
+  transition-timing-function: linear;
+  transition-duration: 0.25s; }
   .tiler-tile.slide-horizontal {
     transition-property: left;
     top: 0; }
@@ -11,6 +12,14 @@
       left: 0%; }
     .tiler-tile.slide-horizontal.exit.end {
       left: -100%; }
+    .tiler-tile.slide-horizontal.reverse.enter.start {
+      left: -100%; }
+    .tiler-tile.slide-horizontal.reverse.enter.end {
+      left: 0%; }
+    .tiler-tile.slide-horizontal.reverse.exit.start {
+      left: 0%; }
+    .tiler-tile.slide-horizontal.reverse.exit.end {
+      left: 100%; }
   .tiler-tile.slide-vertical {
     transition-property: top;
     left: 0; }
@@ -22,6 +31,14 @@
       top: 0%; }
     .tiler-tile.slide-vertical.exit.end {
       top: -100%; }
+    .tiler-tile.slide-vertical.reverse.enter.start {
+      top: -100%; }
+    .tiler-tile.slide-vertical.reverse.enter.end {
+      top: 0%; }
+    .tiler-tile.slide-vertical.reverse.exit.start {
+      top: 0%; }
+    .tiler-tile.slide-vertical.reverse.exit.end {
+      top: 100%; }
   .tiler-tile.fade {
     transition-property: opacity;
     top: 0;
@@ -34,11 +51,3 @@
       opacity: 1; }
     .tiler-tile.fade.exit.end {
       opacity: 1; }
-    .tiler-tile.fade.reverse.enter.start {
-      opacity: 1; }
-    .tiler-tile.fade.reverse.enter.end {
-      opacity: 1; }
-    .tiler-tile.fade.reverse.exit.start {
-      opacity: 1; }
-    .tiler-tile.fade.reverse.exit.end {
-      opacity: 0; }

lib/tiler.css

@@ -2,20 +2,30 @@
   position: relative;
   background: white;
   overflow: hidden; }
+  .tiler-viewport.animation-disabled .tiler-tile {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important; }
   .tiler-viewport .tiler-tile {
     -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
     backface-visibility: hidden;
     -webkit-perspective: 1000;
+    -moz-perspective: 1000;
+    -ms-perspective: 1000;
     perspective: 1000;
-    transition-duration: 0.25s;
     position: absolute;
     overflow: hidden;
     display: block;
-    width: 100%;
-    z-index: -1; }
-    .tiler-viewport .tiler-tile.enter {
+    z-index: -1;
+    width: 100%; }
+    .tiler-viewport .tiler-tile.active {
       z-index: 2; }
-    .tiler-viewport .tiler-tile.exit {
+    .tiler-viewport .tiler-tile.previous {
       z-index: 1; }