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  380

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

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

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

コンテンツを圧縮せずにトランスフォームで高さをアニメートする方法

私のプロジェクトでは、jQueryslideUp() を使用して、ユーザーがボタンをクリックしたときに 200 項目のリスト内の要素を上にスライドさせました。ただし、CSS 高さアニメーションにはリフローが必要であり、アニメーションが不安定になることが知られています。アニメーションはアプリケーションの不可欠な部分であり、アニメーションをスムーズに動作させるために多くの作業を行うつもりです。 CSStransform は GPU 上で処理され、一部の最新のブラウザーではメインスレッドから外れていて、重い JS 作業が変換に影響を与えないため、CSStransform がスムーズに動作する方法であ...

P粉208469050 2024-01-01 11:51:20 0  1  452

CSS テキスト アニメーションが読み込み時に過度にジッターする原因は何ですか?

あらゆるトリックを試しましたが、アニメーションは依然として非常に途切れ途切れです。キーフレームの代わりにトランジションを使用することが推奨されている別の質問でいくつかのアドバイスに従ってみましたが、トランジションを使用するだけでJavascriptを使用する必要があるようで、これは避けたいと考えています。スニペットは次のとおりです: /*//////////////////TOPNAVBARGRID//////////////////*/.grid-コンテナートップナビ{位置:absolu

P粉872101673 2024-04-01 23:54:24 0  1  520

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

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

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

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

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

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

モバイル上のボタンがフォーカスまたはアクティブのままになり、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  523

JavaScript は要素スタイルを使用するよりも CSS カスタム プロパティの更新が遅い: パフォーマンスの比較

私は、mousemove イベントと touchmove イベントを使用してスライド アニメーションを実装する vue3 用のカレンダー スライダーと、いくつかの速度アニメーションを実行する関数を作成しました。プロジェクトはここでテストできます: https://stackblitz.com/github/Der-Alex/vue-calendar-slider?file=src/components/VueCalendarSlider.vue 私の最初のアイデアは、CSS カスタム プロパティ -- posx を使用して保存することでした。

P粉235202573 2024-01-07 09:42:03 0  1  432

React とインライン CSS を使用した Apple アニメーションの問題

HTML と CSS、インライン スタイルと TypeScript を使用して、React でこのアニメーションを再作成しようとしています。スタイル情報を含むオブジェクトを作成し、それを style 属性で参照しています。以下はコードです。動作しません。何が間違っているのかわかりません。スタイルが正しく定義および参照されていないのではないかと思います。これは私が書き直そうとしている元の Codepen の例です: Apple アニメーション これは私のコードです importReactfrom'react';conststyles={'@keyframesshow

P粉729436537 2024-01-10 17:08:30 0  1  339

wowjs アニメーション CSS が無効です。wowjs はアニメーション クラスを HTML 要素に追加しません

ここの Web サイトにアクセスし、開発者ツールを使用して確認すると、次の行が表示されます<!--Singleportfolioitemone--><sectionclass="single-itemscenter-blockparallaxm-0"id="home" style="background: url (革新的/img/シングルポート

P粉748218846 2024-03-19 21:29:39 0  1  388

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

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

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

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

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

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

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

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

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