ngAnimate 是查看 CSS 类 来确定动画长度,还是检测 `animationend` 事件?
Does ngAnimate look at CSS classes to determine animation length, or does it detect the `animationend` event?
标题说的差不多。
当 adding/removing 内容来自 DOM 时,ngAnimate 将保留 DOM 中的元素,直到动画完成。我不知道它是否正在查看任何 transition-duration
或 animation-duration
CSS 属性,或者它是否正在侦听 animationend
事件以销毁离开的元素。
This comment 在 angular animate js 源代码的顶部表明它依赖于 onanimationend 事件:
If unprefixed events are not supported but webkit-prefixed are, use
the latter. Otherwise, just use W3C names, browsers not supporting
them at all will just ignore them. Note: Chrome implements
window.onwebkitanimationend
and doesn't implement
window.onanimationend
but at the same time dispatches the
animationend
event and not webkitAnimationEnd
.
虽然,如果您进一步阅读,他们似乎只是在使用该事件(以及所有其他 animation-related 事件)来检查他们自己的内部计时器 they get by parsing the css styles to see if the animation is completed。
流程似乎是这样的:1) 搜索 css 动画应该持续多长时间,2) 将所有动画事件注册到单个 onAnimationProgress 函数,3) 调用 onAnimationProgess 时,测试如果事件时间与他们的计算结果相同,则 4) 标记完成并触发关闭。
标题说的差不多。
当 adding/removing 内容来自 DOM 时,ngAnimate 将保留 DOM 中的元素,直到动画完成。我不知道它是否正在查看任何 transition-duration
或 animation-duration
CSS 属性,或者它是否正在侦听 animationend
事件以销毁离开的元素。
This comment 在 angular animate js 源代码的顶部表明它依赖于 onanimationend 事件:
If unprefixed events are not supported but webkit-prefixed are, use the latter. Otherwise, just use W3C names, browsers not supporting them at all will just ignore them. Note: Chrome implements
window.onwebkitanimationend
and doesn't implementwindow.onanimationend
but at the same time dispatches theanimationend
event and notwebkitAnimationEnd
.
虽然,如果您进一步阅读,他们似乎只是在使用该事件(以及所有其他 animation-related 事件)来检查他们自己的内部计时器 they get by parsing the css styles to see if the animation is completed。
流程似乎是这样的:1) 搜索 css 动画应该持续多长时间,2) 将所有动画事件注册到单个 onAnimationProgress 函数,3) 调用 onAnimationProgess 时,测试如果事件时间与他们的计算结果相同,则 4) 标记完成并触发关闭。