時間の代わりに動的値に基づく角度2のアニメーション化遷移

Question

Angular 2のアニメーションは、主に固定された時間内の状態間の遷移をアニメーション化するために使用されることを理解していますが、

私の場合、スライド可能な要素があります。これは、デフォルト位置からどれだけ移動したかに基づいてアニメートしたいと考えています。つまり、アニメーションにどれくらいの距離を置くべきかを表す0〜1の浮動小数点数など、ハンドラを動的に提供したいと考えています。 角度2のフレームワークはこれを処理できますか？おそらく、何らかの形でデフォルトのanimate(time) propertyをバイパスして、CSSを変更する基本機能を直接呼び出すことはできますか？

Answer 1

私はあなたの問題については100％明確ではありませんが、角度のあるアニメーションではあなたが求めているものはないと思います。 Angular's animationsは、Web Animation APIの上に構築されています。それ自体は、CSS Animationsとやりとりするための合理的な手段です。 CSSアニメーションはキーフレーム+継続時間で定義されます（https://css-tricks.com/almanac/properties/a/animation/参照）。

理論上、スライド可能な要素の位置に基づいて「ステップスルー」した複雑なキーフレームを作成することはできますが、実際にはあなたが求めているものではありません。

あなたの目標を達成するには、カスタムJavaScriptを使用するか、外部ライブラリを見つける必要があります。あなたはプロジェクトの詳細について少し漠然としていますが、例としてTetherのような図書館が役立つかもしれません。