基于动态值而不是时间的Angular 2动画过渡

Question

虽然我知道 Angular 2 的动画主要用于在固定时间内为状态之间的转换设置动画，但这并不总是最方便的。

在我的例子中，我有一个可滑动的元素，我希望根据我从默认位置移动它的距离来制作动画。也就是说，我想动态地为处理程序提供，例如一个介于 0 和 1 之间的浮点数，表示我应该在动画中走多远。 angular 2 框架 可以处理这个吗？我是否可以以某种方式绕过默认的animate(time) property，直接调用更改css的底层函数？

Answer 1

我不是 100% 清楚您的问题，但我认为您所要求的对于 Angular 动画来说是不可能的。 Angular's animations 建立在 Web 动画 API 之上，它本身只是与 CSS 动画交互的一种简化方式。 CSS 动画由关键帧 + 持续时间定义（参见 https://css-tricks.com/almanac/properties/a/animation/）。

从理论上讲，您可以根据可滑动元素的位置创建一组复杂的关键帧，然后“逐步执行”这些关键帧，但这将是一种技巧，并不是您真正想要的。

为了实现您的目标，我认为您需要使用自定义 Javascript 或查找外部库来帮助您。您对项目细节有点模糊，但是，例如，Tether 之类的库可能会对您有所帮助。