Javascript Angular JS 1.2-使用ng show设置子元素动画

最亲爱的飞越者

我是Angular JS的新手，读过一些关于如何设置Angular方式的动画的文章，但我仍然对如何正确实现它以及何时何地添加哪些类感到非常困惑。我觉得使用传统的jQuery（添加和删除类）可以更好地控制动画。但也许这只是因为我习惯了这样

在pageload中，我希望在其中设置某些元素的动画。所以在我的控制器中，在pageload上，一个变量（pageLoaded）被设置为true。我周围的内容包装div将有ng show=“pageLoaded”

通过这种方式，我成功地使用以下CSS转换/动画在整个页面上添加了动画：

.page.ng-hide-add, .page.ng-hide-remove {
    display:block!important;
}

.popup.ng-hide-add  {
    -webkit-animation: 450ms bounceInRight reverse;
}

.popup.ng-hide-remove {
    -webkit-transform: translateX(100%);
    -webkit-animation: 750ms bounceInRight;
}

但一旦我试图处理子元素，动画就会失败

.page.ng-hide-add .child, .page.ng-hide-remove .child {
    display:block!important;
}

.popup.ng-hide-add .child {
    -webkit-animation: 450ms bounceInRight reverse;
}

.popup.ng-hide-remove .child {
    -webkit-transform: translateX(100%);
    -webkit-animation: 750ms bounceInRight;
}

这是否不受角度的支持？还是我做错了什么

如果我理解正确，不管你是用ng hide还是ng show。。 是否应使用ng隐藏类？它们遵循以下逻辑：

• ng hide remove/ng hide remove active显示元素
• ng隐藏添加/ng隐藏添加活动隐藏元素

---

有人能解释一下普通班和活动班的区别吗？如何使用它们

Angular似乎在扫描文档以查找要设置动画的内容，我发现当想要设置子元素的动画时。您必须在父级上设置转换，只要您希望子级转换

比如说

.page.ng-hide-add, .page.ng-hide-remove {
   -webkit-transition: 1000ms;
}

.page.ng-hide-add .child, .page.ng-hide-remove .child {
    display:block!important;
}

.popup.ng-hide-add .child h1 {
    -webkit-animation: 450ms bounceInRight;
}

.popup.ng-hide-add .child h2 {
    -webkit-animation: 750ms bounceInRight 250ms;
}

---

Angular只会添加“动画”类，如果带有NG-if/NG-SHOW或NG-which元素的HTML元素在指定的CSS中有一个转换。

你能共享你的HTML吗？你有没有尝试过.child.NG-hide-remove和.child.NG-hide-add而不是.child？是的，没有成功。