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

Question

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

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

Answer 1

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

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

为了实现您的目标，我认为您需要使用自定义 Javascript 或寻找外部库来帮助您。您对元素细节有点含糊，但是，例如，像 Tether 这样的库可能对你有帮助。