Javascript 什么是ng hide add，ng hide active

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

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

这是从一本书中摘取的。动画效果很好。但是：

为什么我需要这些类

.ng hide add

和

.ng hide remove

为什么我看不到他们被添加到div的类中

为什么还有类

ng hide add active

和

ng hide remove active

尽管我添加了以下css规则，但为什么div变为可见时没有转换：

div.ng-hide-remove{
不透明度：1；
}

更新

正如我从谷歌教程提供的表格中所看到的，这些类被添加到触发器

动画帧（这将执行回流）

。我的理解正确吗？为什么这里提到了

动画帧

我试图增加过渡期，但没有增加类。我也没有看到添加了类

ng hide add active

和

ng hide remove active

我从表中了解到，这些是触发转换的类

更新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

事件添加了一个回调

---

将CSS转换置于ng hide remove上，ng hide remove处于活动状态：

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;
}

---

你能提供一些小提琴吗。它们用于CSS转换。2.只要增加你的过渡期，你就会看到它们：过渡：10s线性不透明度；3.我不相信本教程显示了css类是如何与动画一起使用的。4.按预期应用CSS动画：@pixelbits，谢谢，请查看我的更新ID您将ngAnimate作为依赖项包括在内：app.module（'app'，['ngAnimate']）；Angular将不会添加CSS类。@pixelbits，是的，我将其作为依赖项包含在控制台中，并且没有错误。非常感谢您的帮助！在我学习英语的过程中，你是迄今为止对我帮助最大的人：）。谢谢！现在还有一些澄清：1。我的理解正确吗？我应该始终在

-active

类之前的类上放置

transition

属性？因此，动画基本上发生在添加

myclass add

和

myclass add active

类之间？您能否在我的原始问题中添加有关我的

update1

的评论？

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


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