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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html - form 表单 用户名提示和错误提示分开显示？

点击输入框，显示用户名提示，点击立即注册按钮，在输入框下显示错误提示 {代码...} 具体效果如下 现在是输入内容不希望显示错误提示我现在的问题是，输入相应的内容，会有错误的提示，效果见下 目的：输入内容不...

PHP中文网 2017-05-15 17:03:55 0  1  674

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

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

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

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

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

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

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

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

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

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

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

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

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

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

angular.js - 同时有angular和jquery插件处理keydown事件

网上下了个jq插件，输入框绑定了click事件，但是我自己写的angular脚本也在同一个输入框上用了ng-keydown。。。我以为是angular的keydown处理函数会执行，结果没效果。。。但是我又不能把插件的click事件处理函数...

漂亮男人 2017-05-15 17:08:07 0  2  633

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

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

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

angular.js - ng-show 表达式动态显示

form input输入框点击搜索框显示提示内容，点击其他地方，提示内容消失 代码见下 {代码...} 具体效果见下 当我点击搜索框时，提示内容显示 求指导，谢谢

怪我咯 2017-05-15 17:04:02 0  1  543

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

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

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

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

丸い境界線 (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  486

入力テキストボックスを閉じる: 値が変更されたときの 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  606

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

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

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

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

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

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