애니메이션이있는 슬라이드 메뉴 애니메이션

Question

hecho esto : | 나는 이것을했습니다 :

<div class="example"> 
    <div class="menuholder"> 
     <ul class="menu slide"> 
      <li> 
       <a href="#" class="Burgergemeinde"> 
        Burger-gemeinde 
        <div class="rojo"></div> 
       </a> 
      </li> 
      <li> 
       <a href="#" class="Seniorenwohnungen"> 
        Senioren-wohnungen 
        <div class="naranja"></div> 
       </a> 
      </li> 
      <li> 
       <a href="#" class="Burgerheim"> 
        Burgerheim 
        <div class="amarillo"></div> 
       </a> 
      </li> 
      <li> 
       <a href="#" class="Schüür"> 
        Schüür 
        <div class="violeta"></div> 
       </a> 
      </li> 
      <li> 
       <a href="#" class="Forst"> 
        Forst 
        <div class="verde"></div> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 

http://jsfiddle.net/qQ39J/1/ CSS 코드 내부 여기

미 pregunta 말이지 : ¿ 포 가야 엔 사파리 funciona 페로 엉 파이어 폭스, 아니? ¿ Puede alguien ayudarme? 그 사람은 아무거나도 사용할 수 없습니다.

내 질문은 : Safari에서는 작동하지만 Firefox에서는 작동하지 않는 이유는 무엇입니까? 누구든지 도와 줄 수 있습니까? 아마 코드를 올바르게 작성하지 않았습니다. 이것은 너무 어렵습니다.

Answer 1

여기 파이어 폭스에서 작동하는 JS 바이올린 데모가 있습니다.

fiddle

는 전이와 함께 당신을 도울 수를 통해 이동합니다.

여기 여기에 CSS를하고 사업부를 애니메이션 CSS를

#main 
{ 
height:200px; 
width:200px; 
background-color:red; 
-webkit-transition: height 0.9s ease-in-out; 
-moz-transition: height 0.9s ease-in-out; 
-ms-transition: height 0.9s ease-in-out; 
-o-transition: height 0.9s ease-in-out; 
transition: height 0.9s ease-in-out; 
} 

#main:hover 
{ 
height:300px;  
} 

입니다.

<div id="main"></div> 

성공한 결과로 넘어갈 수 없는지 확인하고 알려주십시오. 바이올린에서 답을 편집하기 시작하십시오 :)