1

私はこのデモで遊んでいます: http://ademilter.com/lab/liffect/ (選択: zoomIn)

ul[data-liffect="zoomIn"] li {
  opacity: 0;
  position: relative;
  display:inline-block;
  margin:0;
  padding:0;
  -webkit-animation: zoomIn 600ms ease both;
  -webkit-animation-play-state: paused;
  -moz-animation: zoomIn 600ms ease both;
  -moz-animation-play-state: paused;
  -o-animation: zoomIn 600ms ease both;
  -o-animation-play-state: paused;
  animation: zoomIn 600ms ease both;
  animation-play-state: paused;
}

次に、その効果を自分で再現しようとしましたが、リスト項目のプロパティが ではなく に設定されていると機能しないことがわかりましinlineたinline-block。

display プロパティがinlineフェードインのみの場合。

興味深いのは、元のサイトを開発パネルで見ると、デモのリスト アイテムの display プロパティが に設定されていないことinline-blockです。

したがって、リスト項目を作成する必要がありますinline-blockが、それにより要素にマージンが得られます。

これを回避する方法はありますか？

ここでアニメーション効果を選び出しました。

要素の表示プロパティが に設定されている場合、要素のスケールをアニメーション化できますinlineか?

4

1 に答える 1

0

はい、それを回避する方法があります。inline-blockスペースなしで要素を入力することで、使用するスペースを削除できます。

このようなもの：

<ul data-liffect="zoomIn"><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li></ul>​

この理由は、あなたが見ているスペースは実際には ではなくmargin、タイプされた単語の間に入るのと同じようにスペース文字だからです. インライン ブロックはこれらを同じ方法でレンダリングします。それを回避する別の方法は、float代わりにプロパティを使用することです。

これがデモです。

それが役立つことを願っています!

于 2012-12-15T10:15:36.737 に答える