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

Question

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

我目前正在使用“扩展”动画。创建子选项元素时，会为它们提供“drill-expand”类，将它们链接到以下CSS：

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

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

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

我正在使用AngularJS 1.1.4，如果这可能有用。

谢谢！