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

Question

最亲爱的stackoverflowers,

我是新来的角JS,看了一些东西,如何动画角的方式,我依然很困惑如何正确实现它和哪些类被添加在何时何地.我觉得我用传统的jQuery(添加和删除类)可以更好地控制我的动画.但也许这只是因为我习惯了这种方式.

在页面加载中,我希望某些元素可以动画化.因此,在我的控制器中,在页面加载时,变量(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;
}

Angular不支持这个吗？或者我做错了什么？

如果我理解正确,无论你是使用ng-hide还是ng-show ......都应该使用ng-hide类？他们遵循以下逻辑的地方:

• ng-hide-remove/ng-hide-remove-active显示元素
• ng-hide-add/ng-hide-add-active隐藏元素

有人可以解释常规课程和活动课程之间的区别吗？它们应该如何使用？

Answer 1

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

如果具有NG-IF/NG-SHOW或ng-whatever元素的HTML元素在为其指定的CSS中具有转换,则Angular将仅添加"动画"类.