触发CSS转换，使用来自Javascript的样式，从内部指令完成回调

Question

我正试图编写一个指令，在点击时将元素从屏幕上的一个位置移动到另一个位置，使用CSS转换，其中位置由元素上的Javascript/属性决定，而在预先编写的CSS中是未知的。此外，我需要在转换结束时对$scope中的函数进行回调，这是在自定义属性中指定的。所以元素看起来像

<button move-me="100" move-me-after="afterMove()">Move Me!</button>

为了使用$animate，在我的自定义指令moveMe中，点击我会动态地向页面添加一个样式块

<style> .move-me-1 {....}</style>

然后使用

$animate.addClass(iElement, 'move-me-1', function() { ... });

以处理动画和完成后的回调。提供了一个示例plunkr

http://plnkr.co/edit/XRMRO93vl248Ve02Jnpo?p=preview

这似乎过于复杂：在页面中添加样式的标记似乎相当复杂。我这样做是为了在外部样式表中根据运行时间和计时函数指定转换本身，并使用$animate.addClass，这样Angular就可以确定触发回调的正确时间。

有没有一种更简单/更好的方式来实现我想要的？

这个例子被简化为我的实际用例。在我的例子中，动画元素是在指令中创建的，并在最后删除，它只是一个临时的视觉辅助。除了位置之外，元素的开始和最终样式的高度+宽度也是动态确定的，使用状态之间的CSS转换。每种风格都可以有不同的过渡时间+计时功能，以达到我想要的效果。多个元素可以同时移动到不同的位置，因此JS/CSS必须允许这样做。

Answer 1

听起来你需要的不仅仅是复杂动画的angular，它们使用jquery来覆盖给定类的angular的$animate

http://thiswildorchid.com/custom-angularjs-animations-with-jquery-how-to

的另一个例子

编辑：

您应该能够使用纯css指定任何非动态规则和转换。例如

.animate-enter {
   -webkit-transition: 1s linear all; /* Chrome */
   transition: 1s linear all;
   opacity: 0;
}
.animate-enter.animate-enter-active {
   opacity: 1;
}