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