Use class bindings to update the transitioning classes

akashdsouza · Jul 28, 2015 · 44915f6 · 44915f6
1 parent 9d16cb6
commit 44915f6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/addon/components/carousel-item.js b/addon/components/carousel-item.js
@@ -6,7 +6,7 @@ const { on, computed } = Ember;
 export default Ember.Component.extend({
   layout: layout,
   carousel: Ember.inject.service(),
-  classNameBindings: [':carousel-item', 'isActive:active'],
+  classNameBindings: [':carousel-item', 'isActive:active', 'slidingIn:slide-in', 'slidingOut:slide-out', 'from'],
 
   index: 0,
 

diff --git a/addon/services/carousel.js b/addon/services/carousel.js
@@ -21,17 +21,26 @@ export default Ember.Service.extend({
     var activeCarouselItem = this.get('activeCarouselItem');
     var newActiveCarouselItem = carouselItems[newActiveIndex];
 
-    activeCarouselItem.$()[0].classList.add(direction);
-    newActiveCarouselItem.$()[0].classList.add(direction);
+    activeCarouselItem.set('from', direction);
+    newActiveCarouselItem.set('from', direction);
 
     run.later(function() {
-      activeCarouselItem.$()[0].classList.add('slide-out');
-      newActiveCarouselItem.$()[0].classList.add('slide-in');
+      activeCarouselItem.set('slidingOut', true);
+      newActiveCarouselItem.set('slidingIn', true);
     }, 50)
 
     run.later(function() {
-      activeCarouselItem.set('isActive', false);
-      newActiveCarouselItem.set('isActive', true);
+      activeCarouselItem.setProperties({
+        slidingOut: false,
+        from: null,
+        isActive: false
+      });
+
+      newActiveCarouselItem.setProperties({
+        slidingIn: false,
+        from: null,
+        isActive: true
+      });
     }, 550);
   },