firefox CSS转换错误

Question

I wrote some CSS to cause a sidebar to do a slide transition from off the page to visible when you mouse over the side of the page. The CSS is simple and involves adding/removing a class that controls the left: position of the sidebar.

#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;
}

Try the following demo on a webkit browser and on Firefox: http://jsfiddle.net/MmFnY/7/

You'll notice on webkit, the blue colored div has the 0.2s slide left transition but on Firefox it does not. Does anyone know whats wrong with the CSS above?

Answer 1

In order for the transition to work you need to provide it with a default left value. Easiest way to do this is probably to give it another class for when it's inside such as:

.slideRight{
    left: 0px;
}

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