JavaScript - CSS アニメーションに関する問題は何ですか?

リフローと再ペイントに関する記事 http://blog.csdn.net/ClaireKe... を読みました。いくつか疑問があります: 1. ブラウザのメカニズムでは、更新操作にはリフローと再描画が含まれる必要がありますか? 2. ページに `div { {code... などの CSS アニメーションが含まれている場合

为情所困 2017-05-18 10:49:05 0  1  650

Vue.js で、ボタンをクリックしてアニメーションをランダムに生成します

3 つの Lottie プレーヤー JSON アニメーション ファイルがあります - congratulations1.json、congratulations2.json、congratulations3.json アニメーションは次のとおりです。 Congratulations 1: <lottie-playerv-if="showPlayer1" class="justify-content-center" src=" . ./../../

P粉722521204 2024-03-27 23:57:52 0  1  362

svgアニメーションとcss3アニメーションの長所と短所は何ですか?

RT、トランジション アニメーション効果はどのような状況で、どのソリューションに適していますか?

曾经蜡笔没有小新 2017-05-16 13:21:17 0  1  622

CSSアニメーションは消えません

ホバーすると背景画像がフェードインおよびフェードアウトするという単純なアニメーションの問題を解決しようとしています。キーフレームを定義したにもかかわらず、Web ブラウザにはそれが未定義として表示されます: .elementor-section.elementor-element.core-range>.elementor-container:hover.product-image::before{animation:coreRangeBackground0.3sease-in -out0。

P粉352408038 2023-08-18 16:45:01 0  1  543

Lottie アニメーションが localhost サーバーには正しく読み込まれるのに、展開サーバーには正しく読み込まれないのはなぜですか?

問題は、すべての Lottie アニメーションがローカルホスト サーバーに読み込まれることですが、Web アプリがデプロイされると、アニメーションが読み込まれず、コンソールにいくつかのエラーが表示されることです。アニメーション ファイルは .json ファイルです。私のプロジェクトは次の jsReact プロジェクトです。 Lottie へのリンク: https://lottiefiles.com/ しかし、デプロイメントサーバー (vercel) を開くと、アニメーションのロードに失敗し、コンソールにいくつかのエラーが表示されます。この問題はどうすれば解決できますか?

P粉662614213 2024-03-29 12:05:35 0  2  421

JavaScript - 音楽プレーヤーと画像の回転

NetEase Cloud Music や QQ Music と同様に、中央の画像を回転させるというアイデアは、js animate を使用して制御するか、css3 アニメーションを記述することです。

巴扎黑 2017-06-26 10:54:45 0  5  1364

php - 同僚の皆さん、デザインのアイデアを共有してください。

このようなバックエンドを作成したいのですが、要件は次のとおりです。 1. キーワードを追加するバックエンドを作成します。 。さまざまなカテゴリと権限管理があります。 。 。 2. 関連する音声、関連する回答、関連するビデオ、アニメーション、その他の学習リソースを含むキーワードを追加します。例: 白雪姫と言いたいのですが...

我想大声告诉你 2017-06-26 10:49:03 0  1  790

JavaScript - アニメーションの表示と非表示を切り替えるための良い解決策はありますか?

例: このアニメーションと同じ効果になります 最初に div が非表示になりますが、ボタンをクリックすると表示されてアニメーション効果がかかります 非表示にしても同様ですしかし、明らかに複雑に書きすぎました。もっと簡単な解決策 (サードパーティのライブラリを使用しない) はありますか?

阿神 2017-06-30 09:59:55 0  5  1012

javascript - ページの読み込みアニメーション効果が表示されない？

1. 現在取り組んでいるプロジェクトはデータ テーブル ページですが、バックグラウンド クエリに時間がかかるため、ユーザー エクスペリエンスを向上させるために、読み込みアニメーションが追加されています。アニメーションを読み込むためのプラグインには問題はありませんが、メソッドの実行中にアニメーション効果が存在しないことがわかります。 2. コードを直接貼り付けます。 jsを始めましょう...

迷茫 2017-05-19 10:18:28 0  4  677

Android はネットワークの取得とレイアウトの読み込みをどのように実装しますか?

自社プロジェクトではWebViewを使用して製品を開発しているため、CSS3アニメーションの実行が非常に遅いため、ネイティブアプリ版も開発したいが、インターフェースを柔軟に更新できるWebの利点も残したいと考えています。アプリを起動するたびにサーバーから取得するため、XML はローカルに配置されて読み込まれます。私はAを発症したことがないので...

大家讲道理 2017-06-12 09:24:30 0  2  871

スタイル付きコンポーネントでの @property の使用: ガイド

アプリケーションでアニメーションを使用したいのですが、SCSS で @property 関数が必要です: @property--border-angle{syntax:"<angle>";inherits:true;initial-value:0turn;} 何か方法はありますかこれはスタイル付きコンポーネントですか?アニメーションの完全なコードは次のとおりです: https://codepen.io/shshaw/pen/RwJwJJx またはこれを書き直す方法

P粉808697471 2024-03-28 13:35:39 0  1  390

最後の列にクラスを追加すると画像やアニメーションが消えるのはなぜですか?

6枚の画像を無限ループでアニメーションさせようとしています。 6 番目の画像を追加して「poster」クラスを追加すると、画像は表示されませんが、6 番目の列 (または画像) に「poster」クラスの追加を省略すると、最初の 5 つの画像が表示され、正しくアニメーション化されます。なぜこんなことが起こるのか分かりません。ご覧のとおり、「ポスター」クラスは 6 列目にないため、コードは機能しますが、そのクラスを追加するとすぐに機能しなくなります。 (私は bootstrap5 を使用していますが、それはこの問題とは何の関係もないと確信しています。

P粉792026467 2023-08-15 11:29:09 0  1  410

Vue 3 - Svgator プレーヤーは常に未定義です。

現在、SVGatorを使用してSVGアニメーションを作成しています。これをリソースとしてアプリにインポートし、実行してみました。ドキュメントの指示に従って、動作させることができました。ただし、大量のアニメーションを作成する必要があるかもしれないので、より一般的なものにしてみました。 ref、defineComponent、h、component、watchなどのコンポーネントをインポートしました。

P粉478835592 2023-07-28 08:44:31 0  1  509

モバイル上のボタンがフォーカスまたはアクティブのままになり、CSS アニメーションで問題が発生する

ボタンをクリックするたびにアニメーションを実現しようとしていますが、デスクトップでは正常に動作しますが、モバイルでは同じ効果を実現できません。最初にボタンをクリックし、次に別の場所をクリックして CSS のフォーカスを解除し、次にボタンをもう一度クリックしてアニメーション効果を得る必要があります。以下はコードスニペットです。 .btn_container{color:#35f8ff;position:relative;display:inline-block;text-align:center;margin:2.5remauto

P粉043295337 2023-08-28 15:14:37 0  1  502

javascript - swiper.js での複数の切り替え方向の問題

現在のシーンは次のようになります。左右に切り替わる 4 つのアニメーション ページがあり、各アニメーション ページを下にスライドして別の同じページに切り替えることができる必要があります。現在、swiper.js を使用しています。これらの間でアニメーションを切り替えるにはどうすればよいですか?左右?下にスライドしてページを表示できるのですが、下にスライドして表示されるページも上と同じです…。

过去多啦不再A梦 2017-06-24 09:43:29 0  1  846

JavaScript - トランスフォームでスクロール効果を作成するのに 2 つの要素が必要な理由

他の人の記事を読んだのですが、小さなボールの放物線効果を実現するために 2 つのアニメーションを実行するには、1 つの要素 &lt;div class="ball"&gt;&lt;/div&gt; を記述するだけでなく、2 つの要素のレイヤーを使用する必要がある理由を読みました。 ? 次に、transform を使用してそれを実行します x 軸と y 軸の変更、このように書いても効果がないことがわかりました。しかし、なぜ？これ...

滿天的星座 2017-05-19 10:18:02 0  2  810

JavaScript - モバイルCSSアニメーションの再生状態の一時停止がiOSでは機能しませんanimation-play-state

モバイル CSS アニメーションの再生状態の一時停止が、iOS では機能しません anime-play-state 画像をクリックして停止し、画像をクリックして回転を続けたいと考えています。これは Android スマートフォンでは実現できますが、iOS では、画像を初めてクリックすると、静止した動きはせずに回転し続けます。代わりに、2 回目にクリックすると...

给我你的怀抱 2017-06-26 10:53:05 0  1  1211

node.js - nodejs は png から gif アニメーションをバッチで生成できますか?これに遭遇したことがありますか？

たとえば、一度に 40 個または 50 個の GIF を作成したいのですが、各 GIF には 2 フレームの png ソース画像が含まれています。png を GIF にバッチ処理する機能を実装できますか? インターネット上にはオンライン GIF ジェネレーターがありますが、生成できるのは 1 つの GIF のみであり、複数の GIF をバッチで生成することはできません。また、GIF の速度を制御する方法もありません。

ringa_lee 2017-05-16 13:22:54 0  1  757

グラフデータが変更されるとGoogleグラフアニメーションが見えなくなる

Google チャートのアニメーションを適切に動作させることができません。問題は、グラフがデータを更新するだけでなく再描画し続けることだと思いますが、Google のサンプル コードと JavaScript に関する私の限られた知識に基づくと、これを修正する方法がわかりません。グラフは最終的にデータ ソースからデータを動的に更新するため、グラフを更新するボタンは含めたくありません。データの変更を適切にアニメーション化するにはどうすればグラフを更新できますか?参考: https://developers.google.com/chart/interactive/d

P粉170438285 2023-09-02 12:32:58 0  1  720

CSS アニメーションを終了時に最終状態に保つ

CSS で opacity:0; に設定されているいくつかの要素でアニメーションを実行しています。キーフレームを使用してアニメーション クラスが onClick イベントに適用され、不透明度が 0 から 1 に変更されます (その他の変更もいくつかあります)。残念ながら、アニメーションが終了すると、要素は不透明度: 0 の状態に戻ります (Firefox と Chrome の両方)。私の直感では、アニメーション化された要素は最終状態に残り、元のプロパティがオーバーライドされると考えています。これは本当ではないでしょうか？そうでない場合、要素を最終状態に保つにはどうすればよいでしょうか?コード ...

P粉950128819 2023-08-20 18:36:55 0  2  636