角度2动画过渡基于动态值而不是时间

时间:2016-08-23 20:38:28

标签: javascript css animation angular

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

在我的情况下,我有一个可滑动的元素,我希望根据我将其从默认位置移动多远来制作动画。也就是说,我想动态地提供处理程序,例如0到1之间的浮点数,表示我应该沿着动画的距离。 angular 2 framework 可以处理吗?我是否可能以某种方式绕过默认的animate(time) property,并直接调用更改css的基础函数?

1 个答案:

答案 0 :(得分:1)

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

从理论上讲,你可以根据可滑动元素的位置创建一组复杂的关键帧,但这可能是一个黑客,而不是你要求的。

为了实现您的目标,我认为您需要使用自定义Javascript或查找外部库来帮助您。你对项目细节有点模糊,但是,作为一个例子,像Tether这样的图书馆可能对你有所帮助。