Animating multiple divs using ng-hide - html

Question

I have a few divs on my view which need to be animated.
I created some CSS like this:
.pk-image-container {
position: relative;
height: 625px;
.animate-hide {
position: absolute;
left: 0;
opacity: 1;
transition: all ease 1s;
height: 625px;
width: 100%;
&.ng-hide {
left: -100%;
opacity: 0;
}
}
}
The view looks like this:
<div class="pk-image-container" ng-if="!multiple">
<div class="animate-hide" ng-repeat="answer in question.answers track by $index" ng-hide="$index !== currentSlide"></div>
</div>
So far that gives me a sliding effect fading in from the left and then fading out to the left.
But I want to do something a little better.
I would like the active item to fade in from the left, but the inactive one to fade out to the right.
Can this be done using ng-hide or animate.css?

Answer 1

You could use an additional class of .active on your items and set left: 0.
Otherwise, you can set all items to left: 100%.
To set the class, you can use ng-class.
CSS:
.pk-image-container {
position: relative;
height: 625px;
.animate-hide {
position: absolute;
left: 100%;
opacity: 1;
transition: all ease 1s;
height: 625px;
width: 100%;
&.ng-hide {
left: -100%;
opacity: 0;
}
&.active {
left: 0;
}
}
}
HTML:
<div class="pk-image-container" ng-if="!multiple">
<div ng-class="[animate-hide, {'active': $index === currentSlide}]" ng-repeat="answer in question.answers track by $index" ng-hide="$index !== currentSlide"></div>
</div>

Answer 2

I found a better way of doing it.
I used ngAnimate and I did it like this:
.pk-image-container {
position: relative;
height: 625px;
.slide {
position: absolute;
left: 0;
width: 100%;
height: 625px;
}
.slide.ng-enter {
transition: 0.3s linear all;
left: 100%;
}
/* The finishing CSS styles for the enter animation */
.slide.ng-enter.ng-enter-active {
left: 0;
}
/* now the element will fade out before it is removed from the DOM */
.slide.ng-leave {
transition: 0.3s linear all;
}
.slide.ng-leave.ng-leave-active {
left: -100%;
}
}
and updated the HTML to this:
<div class="pk-image-container" ng-if="!multiple">
<div class="slide" ng-repeat="answer in question.answers track by $index" ng-if="$index === currentSlide"></div>
</div>