0

ページの端にマウスを置いたときに、サイドバーがページの外から見えるようにスライド トランジションを行うようにする CSS をいくつか書きました。CSS は単純left:で、サイドバーの位置を制御するクラスを追加/削除する必要があります。

#sidebarInner{
  height:100%;
  width:50px;
  background-color:blue;
  position: fixed;
  -moz-transition: left .2s linear;
  -webkit-transition: left .2s linear;
  -o-transition: left .2s linear;
  transition: left .2s linear;
  z-index:2;
}
.slideLeft {
  left: -100px;
}

Webkit ブラウザと Firefox で次のデモを試してください: http://jsfiddle.net/MmFnY/7/

Webkit では、青色の div に 0.2 秒のスライド左トランジションがありますが、Firefox ではそうではありません。上記のCSSの何が問題なのか誰か知っていますか?

4

1 に答える 1

1

トランジションが機能するためには、デフォルトの左の値を提供する必要があります。これを行う最も簡単な方法は、おそらく次のように、内部にある場合に別のクラスを与えることです。

.slideRight{
    left: 0px;
}

http://jsfiddle.net/MmFnY/19/

于 2013-06-27T17:41:29.810 に答える