画像を拡大してマウスを離すと元に戻り、Google Chrome_html/css_WEB-ITnose で表示異常が発生する

画像は easyui datagrid 列に配置されます。私が書いたのは、マウスが画像の上を通過してズームインすると、元の形状に戻るということです

コードは次のとおりです:
< img class='imgView' alt='img' src="+ val+ " />
マウスオーバー
a:hover imgView]{
位置: 絶対;
-webkit-transform: スケール (5);
変換: スケール (5);
-webkit-transform: スケール(5);
-ms-transform: スケール (5);
-webkit-transform: すべて 1 を緩和
トランスフォーム: すべて 1 を緩和します。 easy 0s;
z-index:1 0;
}
height:40px;
padding:2px;
マウスが通過すると点滅し続けることがあります時々、再び正常に表示されます。何が起こっているのか知っている人はいますか?結果。しかし、この問題の原理と理由がよくわかりません。要約してみましょう:
1. CSS の過剰なエフェクトを削除すると、ちらつきがなくなります。この種類のトランジション効果では、最初のトランジション効果は問題ありませんが、後続のトランジション効果にはちらつき効果が発生します。
3.F12 は、ちらつき要素の CSS スタイルがトランジション中に変更されていないことを確認します。
(追記：これは私の問題です)
そこで、上記の状況から、文書構造に問題があると感じ、点滅している要素が隠されている可能性があるため、文書構造を変更しました。

あなたの問題は私と似ているようです、これは非常に面倒ですので、よく確認してください。

f12 でトランジション効果を確認する方法は次のとおりですか?

z-index: 10;

}

まだちらつきます

このように変更すると、過剰な互換性ステートメントを削除するだけで、上記の変更はまったく表示されません。変換: スケール(5); トランジション: すべて 1 を緩和 0; これらの 2 つの文はトランジション効果です。私が言いたいのは、これを削除して確認するということですが、矛盾しているのは、これを削除しても写真は変わらないため、確認するものは何もないということです。 どういうことかというと、私の考えに基づいてデバッグ方法を考えたり、方法を変更したりするということです。 transform:scale(5); を使用する代わりに、画像の高さと幅を直接変更してみることができます。

代わりに js アニメーションを使用することもできます。 。 。

このような変更は、過剰な互換性ステートメントを削除するだけであり、上記の変更はまったく表示されません。変換: スケール(5); トランジション: すべて 1 を緩和 0; これらの 2 つの文はトランジション効果です。何が言いたいかというと、これを削除して確認するということですが、逆説的に、これを削除しても写真は変わらないため、確認するものは何もありません。
どういうことかというと、私の考えに基づいてデバッグ方法を考えたり、方法を変更したりするということです。
transform:scale(5); を使用する代わりに、画像の高さと幅を直接変更してみることができます。

幅と高さを直接設定しましたが、まだ機能しません。画像の端にマウスを置いてください

これを代わりに js アニメーションを使用して実現できます。 。 。

jsでCSSを設定するとはどういう意味ですか?効果は同じです


代わりに js アニメーションを使用することもできます。 。 。

ありがとうございます、アニメーション機能が実装できました。

JQueryを使えば実現できます

     transition: all 1s ease 0s;应该写在a后而非 ：hover事件之后 。 }

jsで遅延表示や遅延非表示を設定した方が良いです なお、easy uiのdatagridはこれには向いていません…

非常に簡単な書き方です。

img{overflow: hidden;transition:all 5s;}

img:hover{transform:scale(1.2)} のようなものです

マウスを置くと、画像が徐々に大きくなり、効果は良好です

この方法では、画像は点滅しませんが、画像がゆっくり拡大することはありません

また、JS で遅延表示または遅延非表示を設定することをお勧めします。これ...

jquery animate 関数を使用して複数の画像間でマウスを何度か前後に動かしましたが、アニメーションが停止できませんでした

非常に簡単な書き方は
img{overflow のようなものです。 :hidden;transition:all 5s;}
img:hover {transform:scale(1.2)}
画像の上にマウスを置くと、画像が徐々に大きくなります。効果は良好です

これは 360 互換モードの場合です。
また、IE9以下では他の要素の擬似クラスはサポートされていません

jsで遅延表示や遅延非表示を設定したほうが良いです また、easy uiのデータグリッドはこれには適していません...

以前、jquery のアニメーション機能を使用して複数の画像間でマウスを何度か往復させましたが、アニメーションが停止できませんでした

このような眩しい効果は確かに少し難しいです。 。 。 。 。 。

http://www.kendoui.io/examples/grid/index.html

これはもっとクールです、見てください。 ,

jsでは遅延表示や遅延非表示を設定した方が良いです。 また、easy uiのdatagridはこれには向いていません…

以前はjqueryのanimate関数を使って移動していました。マウスを複数の写真の間で往復させると、数回クリックしてもアニメーションが止まらなくなりました

このような眩しい効果は、確かに少し難しいです。 。 。 。 。 。

http://www.kendoui.io/examples/grid/index.html

これはもっとクールです、見てください。 ,

はい、ありがとうございます。
imgの後にtransition:all 1sease 0sを書きましたが、基本的には普通に使えます。

jsで遅延表示や遅延非表示を設定した方がよく、簡単UIのデータグリッドはこれには向いていない…

jqueryのanimate関数を使ってマウスを前後に動かしました複数の写真の間で何度かアニメーションが止まらなくなります

このような眩しい効果は確かに少し難しいです。 。 。 。 。 。

http://www.kendoui.io/examples/grid/index.html

これはもっとクールです、見てください。 ,

はい、ありがとうございます。
imgの後にtransition:all 1sease 0sを書きましたが、基本的には普通に使えます。

jsで遅延表示や遅延非表示を設定した方がよく、簡単UIのデータグリッドはこれには向いていない…

jqueryのanimate関数を使ってマウスを前後に動かしました複数の写真の間で何度かアニメーションが止まらなくなります

このような眩しい効果は確かに少し難しいです。 。 。 。 。 。

http://www.kendoui.io/examples/grid/index.html

これはもっとクールです、見てください。 ,

うーん、ありがとうございます。
imgの後にtransition:all 1sease 0sを書きましたが、基本的には普通に使えます。