什么是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. 虽然我已经添加了以下css规则，但为什么div无法转换：

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

更新


1. 正如我从谷歌教程提供的表格中看到的那样，这些类被添加到触发器animation frame (this performs a reflow)。我的理解是否正确？为什么在那里提到animation frame？
2. 我试图增加过渡期，但它没有添加课程。我没有看到添加的课程ng-hide-add-active和ng-hide-remove-active。
3. 据我从表中了解，这些是触发转换的类吗？

UPDATE1
我已经探索了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服务不可用，会发生什么？考虑到上面的代码以及它将如何添加ng-hide类，Angular将如何处理这种情况？或者这个$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;
}