使用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-隐藏或animate.css来完成吗？

Answer 1

我找到了一个更好的方法。我用了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>

Answer 2

您可以在项上使用额外的.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>