dom - 如何在元素被销毁之前触发 CSS 动画？

Question

我正在尝试为向下钻取菜单设置动画，以便当用户单击一个选项时，子选项以动画方式展开，并且当再次单击主选项时，子选项也会以动画方式折叠。向下钻取菜单本身有效，但动画给我带来了麻烦。

我目前的“展开”动画工作正常。创建子选项元素时，它们会被赋予“drill-expand”类，将它们链接到以下 CSS：

.drill-expand {
animation:expand 1s;
-webkit-animation:expand 1s; /* Safari and Chrome */ 
}

和相应的@keyframes 动画。首次单击主选项时，会创建子选项，并根据钻-展开动画显示。

但是问题出现在折叠子选项中。单击主选项以折叠子选项时，我无法让子选项跟随动画。相反，DOM 元素只是被破坏（向下钻取菜单的正确行为，但不漂亮 - 我想要一个动画）。有没有办法在 DOM 元素被销毁之前触发“折叠”动画？

如果有用的话，我正在使用 AngularJS 1.1.4。

谢谢！