javascript - 为什么基于 ng-class 的 ng-animate 转换不起作用？

Question

这是一个非常简化的 ng-class 动画演示，它使用了我正在尝试实现的过渡。

我正在尝试在选择元素时创建一个简单的淡入淡出动画。

选择一个元素将使用 ng-class 指令在其上添加一个 selected 类。我正在尝试在 documentation 之后向其添加过渡。使用 ng-animate 添加的动画 Hook 类。

下面是我目前的代码。它将 opacity 与 transition 属性一起设置为 0，并且当添加 .selected-add-active 类时，它应该转换到 opacity 1. 但它不起作用。

angular.module('demo', ['ngAnimate'])
  .controller('demoCtrl', function($scope) {
    $scope.selected = false;
    $scope.selectToggle = function() {
      $scope.selected = !$scope.selected;
    };
  });

.item {
  width: 50px;
  height: 50px;
  background: grey;
}
.item.selected {
  background-color: dodgerblue;
}
.item.selected.selected-add {
  transition: opacity 3s;
  opacity: 0;
}
.item.selected.selected-add.selected-add-active {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.js"></script>
<div ng-app="demo" ng-controller="demoCtrl">
  <div class="item" ng-class="{selected:selected}"></div>
  <br>
  <br>
  <button ng-click="selectToggle();">
    {{selected? 'Unselect' : 'Select'}}
  </button>
</div>

为什么我的代码不起作用？

Answer 1

这里的问题似乎是 Angular ng-animate 应用 CSS 类的顺序以及浏览器如何优化 DOM 回流。

ng-animate 在实际添加类 x 之前首先添加了 x-add 类。这是它强制(或伪造)DOM 重排的地方，以便浏览器检测动画的初始状态。

但由于初始状态的 CSS 选择器 (.item.selected.selected-add) 与尚未添加的 .selected 类链接在一起，因此它不会'匹配任何内容，浏览器将忽略它。

在此之后，ng-animate 添加了 selected 类，然后是 selected-add-active 类。此时初始状态的 CSS 选择器确实匹配，但这些更改发生在同一个回流中，因此浏览器选择从具有最高特异性的选择器应用 opacity

.item.selected.selected-add.selected-add-active {
  opacity: 1;
}

现在，由于未检测到元素的 opacity 发生实际变化，因此不会发生转换。

---

要解决此问题，请避免将 ng-animate 添加的动画 Hook 类与被切换的类链接起来。特别是 x-add 类，它应该在应用以下类之前被浏览器检测到。

下面是一个工作示例:

angular.module('demo', ['ngAnimate'])
  .controller('demoCtrl', function($scope) {
    $scope.selected = false;
    $scope.selectToggle = function() {
      $scope.selected = !$scope.selected;
    };
  });

.item {
  width: 50px;
  height: 50px;
  background: grey;
}
.item.selected {
  background-color: dodgerblue;
}
.item.selected-add {
  transition: opacity 3s;
  opacity: 0;
}
.item.selected-add.selected-add-active {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.js"></script>
<div ng-app="demo" ng-controller="demoCtrl">
  <div class="item" ng-class="{selected:selected}"></div>
  <br>
  <br>
  <button ng-click="selectToggle();">
    {{selected? 'Unselect' : 'Select'}}
  </button>
</div>