Merge branch '5.2-wip' of github.com:zurb/foundation into 5.2-wip

foundation · Mar 5, 2014 · f792e3f · f792e3f
2 parents 425d3e7 + dc81a20
commit f792e3f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 23 deletions.
diff --git a/doc/assets/scss/docs.scss b/doc/assets/scss/docs.scss
@@ -1,4 +1,4 @@
-@import "global";
+ @import "global";
 @import "foundation";
 @import "code";
 @import "marketing-off-canvas";

diff --git a/js/foundation/foundation.orbit.js b/js/foundation/foundation.orbit.js
@@ -87,16 +87,13 @@
       var dir = 'next';
       if (next_idx <= idx) { dir = 'prev'; }
 
-      // check if no classes are applied, then apply, delay for 100ms
-      // if (!slides_container.hasClass("swipe-prev") && !slides_container.hasClass("swipe-next")) {
-
-      // }
-
-      setTimeout(function(){
-        slides_container.removeClass("swipe-prev swipe-next");
-        if (dir === 'next') {slides_container.addClass("swipe-next");}
-        else if (dir === 'prev') {slides_container.addClass("swipe-prev");}        
-      },0);
+      if (settings.animation === 'slide') {    
+        setTimeout(function(){
+          slides_container.removeClass("swipe-prev swipe-next");
+          if (dir === 'next') {slides_container.addClass("swipe-next");}
+          else if (dir === 'prev') {slides_container.addClass("swipe-prev");}
+        },0);
+      }
 
       var slides = self.slides();
       if (next_idx >= slides.length) {
@@ -269,6 +266,7 @@
       // animate = new FadeAnimation(settings, slides_container);
       // if (settings.animation === 'slide') 
       //   animate = new SlideAnimation(settings, slides_container);
+      if(settings.animation === 'fade') {slides_container.addClass('fade');}
       animate = new CSSAnimation(settings, slides_container);
       container.on('click', '.'+settings.next_class, self.next);
       container.on('click', '.'+settings.prev_class, self.prev);
@@ -293,7 +291,6 @@
         })
         .on('touchmove.fndtn.orbit',function(e) {
           if (self.cache.animating) {return;}
-
           e.preventDefault();
           e.stopPropagation();
           requestAnimationFrame(function(){
@@ -309,7 +306,6 @@
 
             if (self.cache.is_scrolling) {return;}
 
-
             var direction = (self.cache.delta_x < 0) ? (idx+1) : (idx-1);
             if (self.cache.direction !== direction) {
               var res = self._prepare_direction(direction);
@@ -319,14 +315,16 @@
               self.cache.next = res[2];
             }
 
-            var offset, next_offset;
-
-            offset = (self.cache.delta_x / container.width()) * 100;
-            if (offset >= 0) {next_offset = -(100 - offset);}
-            else {next_offset = 100 + offset;}
+            if (settings.animation === 'slide') {
+              var offset, next_offset;
+
+              offset = (self.cache.delta_x / container.width()) * 100;
+              if (offset >= 0) {next_offset = -(100 - offset);}
+              else {next_offset = 100 + offset;}
 
-            self.cache.current.css("transform","translate3d("+offset+"%,0,0)");
-            self.cache.next.css("transform","translate3d("+next_offset+"%,0,0)");
+              self.cache.current.css("transform","translate3d("+offset+"%,0,0)");
+              self.cache.next.css("transform","translate3d("+next_offset+"%,0,0)");
+            }
           });
         })
         .on('touchend.fndtn.orbit', function(e) {
@@ -413,9 +411,6 @@
 
   var CSSAnimation = function(settings, container) {
     var animation_end = "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend";
-    // var duration = settings.animation_speed;
-    // var is_rtl = ($('html[dir=rtl]').length === 1);
-    // var margin = is_rtl ? 'marginRight' : 'marginLeft';
 
     this.next = function(current, next, callback) {
       next.on(animation_end, function(e){

diff --git a/scss/foundation/components/_orbit.scss b/scss/foundation/components/_orbit.scss
@@ -140,6 +140,27 @@ $preloader-class: "preloader" !default;
 
         img { display: block; max-width: 100%; }
 
+        &.fade > * {
+          -webkit-transform: translate3d(0,0,0);
+          opacity: 0.01;
+          transition: opacity .25s ease-in-out;
+          -moz-transition: opacity .25s ease-in-out;
+          -webkit-transition: opacity .25s ease-in-out;
+          &.animate-in {
+            opacity: 1;
+            z-index: 20;
+            transition: opacity 500ms ease-in-out;
+            -moz-transition: opacity 500ms ease-in-out;
+            -webkit-transition: opacity 500ms ease-in-out;
+          }
+          &.animate-out {
+            opacity: 0.01;
+            z-index: 10;
+            transition: opacity 500ms ease-in-out;
+            -moz-transition: opacity 500ms ease-in-out;
+            -webkit-transition: opacity 500ms ease-in-out;
+          }
+        }
         &.swipe-next > * {
           -webkit-transform: translate3d(100%,0,0);
           &.animate-in {
@@ -208,6 +229,7 @@ $preloader-class: "preloader" !default;
           transform:translate3d(100%,0,0);
 
           &.active {
+            opacity: 1;
             top: 0;
             left: 0;
             -webkit-transform:translate3d(0,0,0);