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>

使用ng-hide动画多个div

2 个答案: