javascript - 什么是 ng-hide-add、ng-hide-active

Question

我正在为一个 div 设置动画。它具有以下定义:

<div ng-show="showTranslations" ng-swipe-right="showTranslationsBlock=false">...</div>

我定义了以下 CSS:

div.ng-hide {
    transition: 0.5s linear opacity;
    opacity: 0;
}

div.ng-hide-add, 
div.ng-hide-remove {
    /* this needs to be here to make it visible during the animation
       since the .ng-hide class is already on the element rendering
       it as hidden. */
    display:block!important;
}

这取自this tutorial .动画有效。但是:

1. 为什么我需要这些类 .ng-hide-add 和 .ng-hide-remove？
2. 为什么我没有看到它们被添加到 div 的类中？
3. 为什么还有 ng-hide-add-active 和 ng-hide-remove-active 类？

4. 为什么当 div 可见时没有转换，尽管我添加了以下 css 规则:

   div.ng-隐藏-删除{
不透明度:1；
}

更新

1. 正如我从 google 教程提供的表格中看到的那样，添加了这些类以触发动画帧(这执行回流)。我的理解正确吗？为什么会提到动画框架？
2. 我试图增加过渡期，但没有增加类(class)。我也没有看到类 ng-hide-add-active 和 ng-hide-remove-active 添加。
3. 我从表中了解到这些是触发转换的类？

更新1
我研究了 Angular 的源代码并找到了 ng-hide 指令的以下内容:

var ngHideDirective = ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngHide, function ngHideWatchAction(value){
      $animate[toBoolean(value) ? 'addClass' : 'removeClass'](element, 'ng-hide');
    });
  };
}];

据我了解，ng-hide 类是通过动画服务添加的。但是，如果我不使用动画并且 $animate 服务不可用会怎样？根据上面的代码，Angular 将如何处理这种情况，以及它将如何添加 ng-hide 类？或者这个 $animate.addClass() 只是向 addClass 事件添加一个回调？

Answer 1

将您的 CSS 转换放在 ng-hide-remove、ng-hide-remove-active 上:

div.ng-hide-remove {
    transition: 0.5s linear opacity;
    opacity: 0;
}


div.ng-hide-remove-active {
    opacity: 1;
}

同样，对于 ng-hide-add 和 ng-hide-add-active:

div.ng-hide-add {
    transition: 0.5s linear opacity;
    opacity: 1;
}


div.ng-hide-add-active {
    opacity: 0;
}