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

Question

我正在尝试编写一条指令，通过单击将元素从屏幕上的一个位置移动到另一个位置，使用 CSS 转换，其中位置由元素上的 Javascript/属性确定，并且在预先编写的 CSS。此外，我需要回调到 $scope 中的函数，在转换结束时完成，这是在自定义属性中指定的。所以元素看起来像

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

为了为此使用 $animate，在我的自定义指令 moveMe 中，单击时我动态地向页面添加样式 block

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

然后使用

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

在动画完成后处理动画和回调。示例 plunkr 可在

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

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

是否有更简单/更好的方法来实现我想要的？

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

Answer 1

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

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

another example

编辑:

您应该能够 specify any non-dynamic rules和 transition使用纯CSS。例如

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

.animate-enter.animate-enter-active {
   opacity: 1;
}