問題タブ [web-animations]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
3 に答える
7942 参照

javascript - Angular 2 で無限アニメーションを実行するにはどうすればよいですか?

基本的に、Angular (現在 4) の web-animations-api ポリフィルを使用して、要素に対して無限のアニメーションを実行したいと考えています。

基本的な非角度の例を見てみましょう:

それをAngularに変換するにはどうすればよいですか?

これは私がこれまでに試したことですが、一度しか機能しません:

ElementRef を保存して上記の例のようにする代わりに、@angular/animation プラグインでそれを行う方法はありますか? または、このプラグインの目的を誤解している可能性がありますか?

前もって感謝します。

0 投票する
2 に答える
637 参照

html - CSSではなくテキストをアニメーション化する方法

Bootstrap でメニュー ナビゲーションを作成し、メニュー内のハイパーリンクへの簡単なトランジションを追加しました... こちらを参照してください

メニューの右側のリンクにカーソルを合わせるとわかるように、CSS を次のように設定したため、左側に移動します。

しかし、問題は、アイコンではなくテキストのみをアニメーション化することです! 理解を深めるために、私の HTML コードを見てください。

ご覧のとおり、各リンクにはアイコンである span タグが含まれています。また、カスタム CSS が原因で影響を受けましたpadding-right:20px;が、span タグがこのトランジションの影響を受けることは望ましくありません。メニューリンクまたはテキストのみをアニメーション化する必要があります...

ですので、この問題の答えをご存知の方がいらっしゃいましたら教えてください!ありがとう :)

0 投票する
3 に答える
8985 参照

angular - Angular 4 コンポーネントのレスポンシブ アニメーション

私はAngularレスポンシブアプリに取り組んでおり、モバイルにはドロワーがあります。

Angular での Web アニメーション API の実装が気に入っていますが、メディアクエリのブレークポイントに基づいてアニメーションを構成できる場所が見つかりません。

私が見つけることができるのは、css シートを介してアニメーションをキャンセルすることだけですが、それにより、プロジェクト内のさまざまな場所にコードが広がり始めます。

実際の例

私のアプリケーション ドロワーは、このコードを使用してアニメーション化します

drawerOpenedアプリ メニュー ボタンが押されたときにトグルするブール値です。

私のコンポーネントは次のようになります。

アニメーション効果をキャンセルするCSSコード

私のcssコードですべてを操作し、デスクトップブレークポイントでcssプロパティを無効にする以外に、Angularコンテキスト内でそれを行う方法はありますか?

ありがとうございました!