Question

我在Angular 1.3.8 Plunker Example中有以下HTML：

<div class="testimonials" ng-controller="MainCtrl">
  <div class="testimonial" ng-repeat="testimonial in testimonials" ng-animate>
    <blockquote>
      <p ng-bind="testimonial.text"></p>
      <cite ng-bind="testimonial.author"></cite>
    </blockquote>
  </div>
</div>

以下CSS：

.testimonial.ng-enter {
  opacity: 0;
}
.testimonial.ng-enter.ng-enter-active {
  opacity: 1;
}
.testimonial.ng-leave {
  opacity: 1;
}
.testimonial.ng-leave-active {
  opacity: 0;
}

我想为每个证词都有一个锚点并改变它......

但不知怎的，这似乎不起作用。

我错过了什么？

Answer 1

如果没有一些严肃的试验和错误，我无法让动画工作。基本上，我摆脱了ng-animate元素上的testimonial属性和ng-repeat类。然后我向ng-show元素添加了blockquote指令。只要我们的CSS是正确的，ng-animate指令实际上是不必要的。

新HTML：

<div class="testimonials" ng-controller="MainCtrl">
  <div ng-repeat="testimonial in testimonials">
    <a href="" ng-click="show($index)">{{testimonial.author}}</a>
    <blockquote class="testimonial" ng-show="testimonial.shouldShow">
      <p ng-bind="testimonial.text"></p>
      <cite ng-bind="testimonial.author"></cite>
    </blockquote>
  </div>
</div>

执行show功能的新Javascript：

$scope.show = function(index) {
  for (var t in $scope.testimonials) {
    $scope.testimonials[t].shouldShow = false;
  }

  $scope.testimonials[index].shouldShow = true;
};

然后需要调整CSS类以使用ng-hide-*而不是ng-enter和ng-remove。这是因为基本思想（我从问题中理解）不是为列表内容设置动画，而是为每个列表项的详细信息设置动画。

新CSS（注意过渡）：

.testimonial.ng-hide-add,
.testimonial.ng-hide-add-active,
.testimonial.ng-hide-remove,
.testimonial.ng-hide-remove-active {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;
}

.testimonial.ng-hide-add {
  opacity: 1;
}
.testimonial.ng-hide-add.ng-hide-add-active {
  opacity: 0;
}
.testimonial.ng-hide-remove {
  opacity: 0;
}
.testimonial.ng-hide-remove-active {
  opacity: 1;
}

对于未来的读者来说，如果您为ngAnimate包含一个脚本标记（它没有内置）并在angular.module中声明对它的依赖关系，那么动画只会有用。设置。

<head>中的HTML示例：

<script src="https://code.angularjs.org/1.3.15/angular-animate.js"></script>

示例module调用：

var myApp = angular.module("myApp", ["ngAnimate"]);

角动画 - 切换证词

1 个答案: