Угловой 2 анимационный переход на основе динамического значения вместо времени

Question

Хотя я понимаю, что анимация Angular 2 в основном используется для анимирования перехода между состояниями в фиксированное время, это не всегда то, что наиболее удобно.

В моем случае у меня есть способ скольжения, который я хочу оживить, исходя из того, насколько далеко я переместил его из положения по умолчанию. То есть, я хочу динамически предоставлять обработчик, например, число с плавающей запятой между 0 и 1, представляющее, насколько далеко по анимации я должен быть. Может ли угловой 2 каркаса справиться с этим? Могу ли я каким-то образом обойти по умолчанию animate(time) property и напрямую вызвать базовую функцию, которая изменяет css?

Answer 1

Я не на 100% прояснил вашу проблему, но я не думаю, что то, о чем вы просите, возможно с помощью Angular animations. Angular's animations построены поверх API веб-анимации, который сам по себе является просто упрощенным средством взаимодействия с анимацией CSS. CSS-анимации определяются ключевыми кадрами + длительности (см. https://css-tricks.com/almanac/properties/a/animation/).

Теоретически вы можете создать сложный набор ключевых кадров, которые вы «перешагнули» на основе положения вашего слайд-способного элемента, но это будет взломать, а не то, о чем вы просите.

Для достижения вашей цели, я думаю, вам нужно будет использовать пользовательский Javascript или найти внешнюю библиотеку, чтобы помочь вам. Вы немного расплывчаты в деталях проекта, но, например, вам может помочь библиотека, например, Tether.