如何使元素停止触发 ngAnimate？答案

【问题标题】：How to make an element stop triggering ngAnimate?如何使元素停止触发 ngAnimate？
【发布时间】：2014-11-04 02:15:40
【问题描述】：

我正在为我的项目制作内容滑块，但我对 AngularJS 的经验很少。我发现this plunker 非常适合我的需求。你可以看到我的直播page here。它是俄语的，但我希望它不会成为问题。滑块位于页面中间 - 包含 8 张卡片的部分。

所以问题是：滑块由其下方的箭头控制。尽管如此，如果您单击卡片内的红色按钮，它将更新模型，并且 ng-enter 和 ng-leave 类将应用于父容器，这将导致滑块动画。嗯，只要点击这些红色按钮，问题就很明显了。

有没有办法让这些红色按钮不将 ng-enter 和 ng-leave 类应用于容器 div？

更新：Here is a plunker，这说明了我的问题。当您单击 Prev 和 Next 按钮时，动画必须发生。但是当您单击“选择”或“选择”链接时会发生这种情况，这会更新模型。

这是一个标记

<body ng-controller="MainCtrl">
    <div class="page-container">
      <div class="gift-page" ng-class="direction" ng-repeat="page in gifts | partition: 6 | offset: currentPage | limitTo: 1">
          <ul class="gift-list clearfix">
              <li class="gift" ng-repeat="gift in page">
                  <div class="gift-item">
                      <div class="gift-details">
                          <h3>{{gift.title}}</h3>
                          <span class="points">{{gift.points}} points</span>
                          <a href="" class="buy" ng-show="!gift.ordered" ng-click="addToBasket(gift)">Choose</a>
                          <a href="" class="bought" ng-show="gift.ordered" ng-click="removeFromBasket(gift)">Chosen</a>
                      </div>
                  </div>
              </li>
          </ul>
      </div>

    </div>
    <div class="controls">
      <button ng-click="prev()">Prev</button>
      <button ng-click="next()">Next</button>
    </div>
  </body>

【问题讨论】：

你能创造一些小玩意儿吗？我对 $animate.enabled(false) 有想法，但不建议使用此解决方案..
Here is plunkr。这与我页面上的问题几乎相同。只有当您单击 Next 和 Prev 按钮（不会发生）而不是当您单击“Choose”或“Choosen”链接时，动画才会发生

标签： javascript html css angularjs slider

【解决方案1】：

快速但不是最好的解决方案是在动作之前关闭动画并在之后打开：

  $scope.addToBasket = function(gift){

    $animate.enabled(false);

    gift.ordered = true;

    $timeout(function(){
      $animate.enabled(true);
    })
  }

这里是plunk。稍后会寻找更好的解决方案））

【讨论】：

非常感谢。我在这里卡了 3 天，不知道如何解决。至少现在可以了！
真正的问题在于分页。这种分页方式使得原始收藏（礼物）的任何更改都将导致重新计算页面并且也将应用动画。我建议你以方便的方式重写它。
快速解决的问题是不建议手动关闭/打开动画，也避免使用超时。

【解决方案2】：

可以尝试添加 $event.stopPropagation();到 ng-click 事件，在你的情况下：

<a href="" class="buy" ng-show="!gift.ordered" ng-click="addToBasket(gift); $event.stopPropagation();">Выбрать</a>

【讨论】：

很遗憾，这没有帮助。