0

参照: http://jsfiddle.net/nweBD/

CSS3 トランジションを使用してスライドショーのような Coverflow を作成しようとしていますが、ブラウザーによって結果が異なります。

FF; 必要な動作を示しています (右のスライドは右から中央にアニメーション化されます)。クロム; 最初に右側のスライドを左側に配置し、次に中央にアニメーション化します。IE10; 何もしません

HTML:

<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>

CSS:

div{
  position:absolute;
  width: 300px;
  height:100px;
  background-color: yellow;
  margin-left: -150px;
  left: 50%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.middle{
  text-align:center;
  z-index:2;
  height:120px;
}

.left{
  text-align:left;
  left: 0;
  right: auto;
  margin-left: 0;
  background-color:green;
}

.right{
  cursor:pointer;
  text-align:right;
  right: 0;
  left: auto;
  margin-left:0;
  background-color:red;
}
4

1 に答える 1

0

ここでの問題は、ブラウザが「自動」との間でアニメーション化するためのさまざまな結果を持っていないか、せいぜい持っていることです。

これを修正するために、CSS を書き直してleft:auto; right:0;butを使用しないようにしましたleft:100%; margin-left:-300px。これは、leftandmargin-leftプロパティをアニメーション化するだけでよく、デフォルトにリセットする必要がないことを意味しますauto。負のマージンは、要素の幅と同じ量であり、目的の位置に引き戻され、 と同じ結果になりright:0;ます。

更新されたフィドルは次のとおりです: http://jsfiddle.net/nweBD/3/

于 2013-06-13T08:09:05.283 に答える