1

我正在尝试编写一个指令，使用 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 必须允许这样做。

4

1 回答 1

2

听起来你需要的不仅仅是复杂动画的角度，这些使用 jquery 来覆盖给定类的角度 $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;
}
于 2013-12-04T11:33:49.033 回答