Анимация нескольких divs с помощью ng-hide

Question

У меня есть несколько div на моем представлении, которые нужно анимировать. Я создал некоторые CSS, как это:

.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; 
     } 
    } 
} 

мнение выглядит следующим образом:

<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> 

До сих пор, что дает мне скользящий эффект замирания с левого, а затем гаснуть слева. Но я хочу сделать что-то немного лучше. Я хочу, чтобы активный элемент исчезал слева, но неактивный, чтобы исчезнуть вправо. Можно ли это сделать, используя ng-hide или animate.css?

Answer 1

Вы можете использовать дополнительный класс .active на своих товарах и установить left: 0. В противном случае вы можете установить все элементы на left: 100%. Чтобы установить класс, вы можете использовать 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

Я нашел лучший способ сделать это. я ngAnimate, и я сделал это так:

.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%; 
    } 
} 

и обновил HTML для этого:

<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>