Question

最亲爱的stackoverflowers，

我是Angular JS的新手，并且已经阅读了一些关于如何为Angular方式设置动画的stuff，但我仍然对如何正确实现它以及何时何地添加哪些类感到困惑。我觉得我用传统的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将仅添加“动画”类。

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

1 个答案: