Animating multiple divs using ng-hide

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>