2

CSStransitionプロパティに問題があります。-tag
に対して 2 つの遷移を宣言する必要があります。sectionセクションを含むすべてのトランジションの持続時間は 1 秒である必要があり、背景のみが 0.3 秒の持続時間を持つ必要があります。

したがって、私のCSStransitionコードは次のようになります。

section{
   background: black;
   transition: all 1s ease, background 0.3s ease;
}
section:hover{
   background: green;
   transform: translateY(100px);
}

しかし、リンクをホバリングすると、背景が 1 秒でアニメーション化され、奇妙に点滅します。
コードペンのデモはこちら

なぜこれが起こったのか誰か知っていますか？そして、どうすれば自分の目標を実現できますか？
はい、私はallプロパティが必要です！

編集

ちょうど奇妙なものを見つけました。上記のリンクされた codepen では、点滅します。しかし、私もアニメーション化するとpadding、点滅が止まります! しかし、背景は 1 秒でアニメーション化されます...
これが 2 番目のデモです

4

2 に答える 2

1

要素にカーソルを合わせると、要素が下に移動し始めるため、問題が発生しました。 要素がホバーされていない場合、元に戻ります。 ホバーすると、要素が動き始め、すぐにホバーを失い、元の状態に戻りますが、マウスオーバーイベントを再度受け取るとホバー効果が得られ、これによりまばたきが発生し、観察した奇妙な現象が発生します。マウスを下の方に近づけると、望ましい効果が得られます。

修正は、これらの要素を含むコンテナーのホバーを記述し、これらの要素に効果を適用することです。

また、まばたきの原因となる可能性のある 1 つの状態だけに遷移を適用しました。

以下のような両方のステートメントへの遷移を使用してみてください。

section{

  width:300px;
  height:300px;
  background:black;
  color:white;
  transition: background 0.3s ease, all 3s ease;
}
section:hover{
  background:green;
  transition: background 0.3s ease, all 3s ease;
}
于 2013-08-19T11:31:42.680 に答える