I'm experiencing a strange issue with ng-class and suspect that it may be related to a race condition.
Here is the example on Plunker: example
Below is the relevant JavaScript code:
self.slideLeft = function() {
if (self.end_index < self.list_of_stuff.length) {
self.direction = 'left';
debugger;
self.start_index = self.start_index + 4;
self.end_index = self.end_index + 4;
self.display_list = self.list_of_stuff.slice(self.start_index, self.end_index);
}
}
self.slideRight = function() {
if (self.start_index > 0) {
self.direction = 'right';
debugger;
self.start_index = self.start_index - 4;
self.end_index = self.end_index - 4;
self.display_list = self.list_of_stuff.slice(self.start_index, self.end_index);
}
}
Here is the relevant HTML:
<div class="stuff-wrapper">
<div class="stuff"
ng-class="bCtrl.directionClass()"
ng-repeat="stuff in bCtrl.display_list">
{{stuff}}
</div>
</div>
Animation:
.left.ng-enter,
.left.ng-leave {
-webkit-transition: all 1s ease-in-out;
}
.left.ng-enter {
transition-delay: 0.7s;
opacity: 0;
left: 10%;
}
.left.ng-enter-active {
opacity: 1;
left: 0;
}
.left.ng-leave {
opacity: 1;
left: -10%;
}
.left.ng-leave-active {
left: -20%;
opacity: 0;
}
This app simply slides a list of numbers left and right. When left button is pressed, numbers slide left. When right button is pressed, numbers slide right. However, when there is a change in direction, initially the numbers slide in the wrong direction before correcting themselves.
I suspect this is due to a race condition. It seems that ng-class does not get applied immediately after changing the direction self.direction during debugging.
Quite peculiar. Any suggestions on how to resolve this?