firefox moz, Web Transitions

Question

Ich habe folgendes:

.ui-dialog-body { 
    position: relative; /* Needed for sliding left, right */ 
    min-height:60px; 
    padding: .5em 1em; 
} 
.ui-dialog-body.slideLeft { 
    left:-500px; 
    -webkit-transition: left .5s linear; 
    -webkit-transition-delay: .2s; 
    -moz-transition-property: left; 
    -moz-transition-duration: .5s; 
} 

Wenn der Benutzer klickt auf ein Element, das Laden erfordert, wird die Klasse slideLeft hinzugefügt, welche die div Blick aus gleitet. Dies funktioniert hervorragend in Webkit (Safari, Chrome), aber nicht in FireFox 4 Beta.

Irgendwelche Ideen, warum das ist?

Answer 1

Vielleicht brauchen Sie left: 0 im ersten Stilregel, so dass der Übergang von 0px zu 500px ist (die interpoliert werden kann), anstatt Auto zu 500px (die nicht).

(Auch gibt es Unterschiede zwischen Ihrem -webkit- * Erklärungen und Ihre -moz- * Erklärungen, aber ich glaube nicht, dass es sein müssen.)

Answer 2

Setzen Sie die Erklärung auf das Element, nicht die hinzugefügt Klasse:

.ui-dialog-body { 
    position: relative; /* Needed for sliding left, right */ 
    min-height:60px; 
    padding: .5em 1em; 
    -webkit-transition: left .5s linear; 
    -moz-transition: left .5s linear; 
    -ms-transition: left .5s linear; 
    -o-transition: left .5s linear; 
    transition: left .5s linear; 
} 

.ui-dialog-body.slideLeft { 
    left:-500px; 
}