angularjs - ngClass在父级上更改时如何为子元素设置动画

Question

是否可以在子元素上定义转换并在 ngClass 为父元素更改时将其考虑在内？

到目前为止，我还无法做到这一点。
http://plnkr.co/edit/ulq1MQNDtY9cO2pcjdzF?p=preview

谢谢。

Answer 1

我认为您尝试这样做的方式是不可能的。Angular 正在基类上寻找动画/过渡属性来确定时间。但是在您的情况下，您所有这些属性都是在子元素上定义的。因此，Angular 无法连接必要的动画钩子。

您可以做的是在应该执行动画步骤时为 Angular 提供提示。像这样：

.container {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

这只是重复的过渡样式，它告诉 Angular 关于过渡所需的一切。

演示笨拙。

看起来提供transition-duration: 1s只是这里的重要部分，所以它可以是：

.container {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}