選択イベントが変化すると、CSS アニメーションが対応する効果をトリガーします。

私は React アプリを作ろうとしています。現在、いくつかのポケモンが入った選択入力ボックスがあります。私がしなければならないことは、選択が変更される (つまり、ポケモンが変更される) たびに、ポケモンのスプライトが少し揺れるアニメーションを実行することです。現在、変更されるスプライトと、選択値が変更されたときに再生されるオーディオだけがあります。この機能を実装するにはどうすればよいですか? onChange と styled-components を使用してスタイルを変更しようとしましたが、動作させることができません。アニメーションはページの読み込み時にのみ起動します。これは私の現在のコー...

P粉200138510 2024-04-01 09:16:28 0  1  555

javascript - js (Vue) 実践：@を入力すると関連候補が自動で表示される方法は？

効果は次のとおりです。 効果の説明: 1. ユーザーが @ 記号を入力すると、オプション リストが表示され、オプション リストは自動的に @ 記号の後ろに配置されます。 (現在のアイデアは、入力文字が @ であるかどうかを動的に監視し、カーソルの移動位置にリスト ボックスが表示されるというものです。) 2. ユーザーが @ を入力すると、ユーザーは入力を続行するという選択を無視します。 。

PHP中文网 2017-07-05 11:03:32 0  3  3660

iOS Safari でページを上に移動してポップアップ キーボードを収容する方法

iPhoneのSafariでキーボードが表示されているときにページを上に移動するにはどうすればよいですか?現在、入力ボックスに注目するとキーボードが入力ボックスを覆います。キーボードを入力ボックスの下に置きたいです。誰か助けてくれませんか？入力ボックスがフォーカスを失ったときにこの効果をキャンセルするにはどうすればよいですか?

P粉715228019 2023-08-09 17:01:31 0  1  696

後続のクラスが要素に追加されるたびに CSS アニメーションを実行する方法

要素をアニメーション化できるように CSS アニメーション クラスを設定しました。入力ボタンがクリックされるとこのクラスが追加され、例の入力ボタンがクリックされるたびに画面に飛ぶようにしたいです。ただし、これは初回のみ機能し、それ以降の入力クリックでは要素はアニメーション化されません。ここで何が足りないのでしょうか？ $(document).ready(function(){jQuery('#cloc').click(function(){jQuery('p').removeClass('anim

P粉714780768 2023-09-09 22:36:42 0  1  559

Vue トランジションのトランジション遅延を削除するにはどうすればよいですか?

Vue を使用して、マウスを画像の上に置くとテキスト ボックスが上に移動してフェードインするようにアニメーション化しています。アニメーションは正しいですが、開始するまでにわずかな遅延があります。画像をホバーするとテキスト ボックスがスムーズにフェードインし、上に移動し始めるようにしたいと考えています。テキスト ボックスは適切にフェードアウトし、カーソルが離れると下に移動します。テンプレート:`{{バッジ[アイテム].説明}}`、メソッド:{hoverStart(i){this.hoveredIndex=i;}、

P粉757432491 2023-08-17 17:36:49 0  1  523

JavaScript - React でアニメーション効果を記述するにはどうすればよいですか?

React でコンポーネントのアニメーション効果を作成するにはどうすればよいですか?たとえば、単純なダイアログ ボックスの場合、[キャンセル] をクリックした後、ダイアログ ボックスが最初にフェードアウトしてから消えるようにしたいと考えています。 jquery を使用する場合、非常に簡単です。まず animate({ //Fade CSS}, function(){ //DOM}) を実行します。でも、どうやって反応すればいいのかわかりません...

世界只因有你 2017-05-18 10:58:34 0  2  768

javascript - 奇妙な問題が見つかりました。タブを閉じると、作成した CSS アニメーションが自動的に一時停止されました。

奇妙な問題が見つかりました。私が作成した CSS アニメーションは、タブを閉じると自動的に一時停止し、タブを展開すると再生し続けます。動きの効果を出すために背景画像を動かして使っているのですが、これと関係があるのでしょうか？

给我你的怀抱 2017-06-30 09:52:30 0  1  859

JavaScript - btcc.com のホームページのアニメーション背景を実装するにはどうすればよいですか?

サイトが読み込まれると、背景に少しアニメーション効果がかかりますが、これはちょうどいい感じです。 https://www.btcc.com/

大家讲道理 2017-05-16 13:26:40 0  1  594

JavaScript - フロントエンドマップアニメーション効果を実装する方法。

以下のエフェクトと同様に、アバターはルートに応じて移動できます。この種のアニメーションはこれまで見たことがありません。フロントエンドはどのように実装すればよいでしょうか?キャンバスか、それとも既成のフレームワークか？この効果を達成するにはどのようなアイデアを使用すればよいのか、まったくわかりません。 。 。

PHPz 2017-05-16 13:36:02 0  2  467

CSS の入力アニメーションが指定された制限を超えています

タイピングアニメーションは毎回設定した文字数で停止します。ステートメントを拡張すると壊れます。ステートメントを短くすると、設定された文字数に達するまでステートメントが継続されます。ステップ数 (50) を変更する必要があることはわかっていますが、実際にはそれが停止する数値ではなく、28 で停止します。 @importurl('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Source+Code+Pro:wght@200&

P粉285587590 2024-03-20 00:25:06 0  1  438

入力テキストボックスを閉じる: 値が変更されたときの ReactJs の操作

次の問題があります。入力テキストボックスがあり、バーコードをスキャンしています。ただし、テキストボックスは自動的に閉じません。キーボードで数字を入力すると自動的に閉じてしまいます。私は何か間違ったことをしましたか？スキャナーが速すぎますか?何か案は？ const[open,setOpen]=useState(false);constonValueChange=(event)=>{if(event.target.value.length===16){setOpen(false);}}

P粉386318086 2023-09-08 23:29:17 0  1  631

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

JavaScript - フロントエンドの自己修養

前述したように、私は業界に入ったばかりで、入社して 2 か月が経ち、自分はダイヤモンドの原石だと思っていますが、会社はフロントエンドの効果をあまり重視していません。 divを書ける、互換性やアニメーション効果は必要ない、ページの基本的なスタイルがあればOK、jsを書く必要はありません。私もフロントエンドフレームワークにはあまり触れたことがありません。 ...

曾经蜡笔没有小新 2017-07-03 11:43:03 0  2  973

JavaScript - SVG初心者、SVGに画像を挿入したい

コードは上記の通りです。SVGに画像を挿入してアニメーションさせたいのですが、効果がありません。説明してください...

代言 2017-06-24 09:44:02 0  1  915

タイトルは次のように書き直されました： CSS ですべての入力領域 (電子メールのサインアップ、コメント ボックス、レシピ インデックス ページのドロップダウンを含む) のテキストのサイズを変更するにはどうすればよいですか?

ウェブサイト: https://olivesfordinner.com/ ホームページにサインアップするためにメールを入力するときにテキストを大きくする CSS コードを探しています。これは小さすぎます。レシピ投稿 (例: https://olivesfordinner.com/toasted-muesli-recipe/) にコメントを残すとき、読者が入力するにつれてテキストを大きくするにはどうすればよいですか。繰り返しますが、このテキストは小さすぎます。左列のドロップダウン テキスト ボックスのテキストを大きくする方法。とても小さいんです！ https://ol

P粉465675962 2023-09-14 15:17:43 0  2  638

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

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

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

境界線のグラデーションは境界線の半径と互換性がありますか?

丸い境界線 (border-radius) を使用して入力ボックスをスタイルし、境界線にグラデーション効果を追加しようとしています。グラデーションと丸い境界線は正常に作成できますが、両方を同時に作成することはできません。丸い角はあるがグラデーションがない、またはグラデーションはあるが丸い角がないかのどちらかです。 -webkit-border-radius:5px;-webkit-border-image:-webkit-gradient(linear,00,0100%,from(#b0bbc4),to(#ce

P粉824889650 2023-08-21 20:39:38 0  2  508

javascript - JQuery が新しく作成された img タグに onload イベントを追加し、それを自動的に呼び出す方法。

最初にページに入ると、次のようになります: Web ページが読み込まれた後、ターゲット イメージが自動的に呼び出されます。見つからない場合は、バックアップ イメージが使用されます (JS の onload イベント noImg() メソッド)。ここでの問題は、検索ボックスにキーワードを入力して [検索] をクリックすると、検索結果が Web ページに表示された後、on... が呼び出されなくなることです。

阿神 2017-05-17 10:06:31 0  3  668

css3 - CSS トランジション効果によりテキストがぼやけたりジッターしたりすることがありますか?

コード: テンプレート: {code...} CSS: {code...} いくつかの無関係なスタイルは削除されています。現在知られている状況は、右側の小さな三角形のトランジション効果です。 Chrome のドロップダウン ボックス。これにより、テキストがぼやけてジッターが発生します。backface-visibility: hidden; を追加すると、テキスト...

ringa_lee 2017-05-24 11:35:53 0  2  2456

javascript - vuejs の変数に基づいてさまざまな CSS スタイルを参照する方法

以前のプロジェクトを Vue フレームワークに変更する必要があります。これで CSS とすべてが揃いました。ここで、変数に基づいたさまざまな CSS ファイルを紹介したいと思います。 if(){//import from ''xxx.css} の論理効果と同様です。皆さんにお聞きしたいのですが、vueフレームワークで実装できますか、それともwebpackで実装できますか？

曾经蜡笔没有小新 2017-07-05 10:37:08 0  1  654