使用ng-hide動畫多個div

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>