Orbit: remove `.animate-in` late (just before setting `.active`)

This fixes the animations, especially with `variable_height` handling,
where the slide content would slide in, but then disappear until the
final animation of the containers height gets done / is finished.

diff --git a/js/foundation/foundation.orbit.js b/js/foundation/foundation.orbit.js
index d52c27427576f6fb7eb5776f1b9e9e0df5629c26..b04cc9d6621131ec455ba18327599cd2346bb8b3 100644 (file)
--- a/js/foundation/foundation.orbit.js
+++ b/js/foundation/foundation.orbit.js
@@ -142,6 +142,8 @@
         var unlock = function() {
           if (start_timer === true) {self.cache.timer.restart();}
           self.update_slide_number(idx);
+          // Remove "animate-in" class as late as possible to avoid "flickering" (especially with variable_height).
+          next.removeClass("animate-in");
           next.addClass(settings.active_slide_class);
           self.update_active_link(next_idx);
           slides_container.trigger('after-slide-change.fndtn.orbit',[{slide_number: idx, total_slides: slides.length}]);
@@ -447,7 +449,6 @@
         next.on(animation_end, function(e){
           next.unbind(animation_end);
           current.removeClass("active animate-out");
-          next.removeClass("animate-in");
           container.children().css({
             "transform":"",
             "-ms-transform":"",
@@ -461,7 +462,6 @@
       } else {
         setTimeout(function(){
           current.removeClass("active animate-out");
-          next.removeClass("animate-in");
           container.children().css({
             "transform":"",
             "-ms-transform":"",
@@ -490,7 +490,6 @@
         prev.on(animation_end, function(e){
           prev.unbind(animation_end);
           current.removeClass("active animate-out");
-          prev.removeClass("animate-in");
           container.children().css({
             "transform":"",
             "-ms-transform":"",
@@ -504,7 +503,6 @@
       } else {
         setTimeout(function(){
           current.removeClass("active animate-out");
-          prev.removeClass("animate-in");
           container.children().css({
             "transform":"",
             "-ms-transform":"",