左側過渡（在菜單上）不起作用

Question

左側過渡不適用於我的菜單。 你可以在這裏 www.glennvanroggen.nl

在jQuery中看到它時，你點擊#show，它會切換上。菜單類.menu_out。

$(document).ready(function(){ 
     $('#show').click(function(){ 
      $('.content').toggleClass("content_out"); 
     }); 
     $('#show').click(function(){ 
      $('.menu').toggleClass("menu_out"); 
     }); 
    }); 

但事情是。過渡不起作用。所以菜單移動到左邊，但沒有轉換。我添加了一個不透明度轉換來檢查它是否會起作用。那個人做到了。所以我不知道了。

.menu { 
    position: fixed; 
    left: -200px; 
    width: 200px; 
    height: 100%; 
    bottom: 0; 
    border-right: 1px solid #F0D4B0; 
    background-color: #002129; 
    -webkit-transition: left 0.3s ease-in; 
    -moz-transition: left 0.3s ease-in; 
    -o-transition: left 0.3s ease-in; 
    -ms-transition: left 0.3s ease-in; 
    transition: left 0.3s ease-in; 
    -webkit-transition: background-color 5s ease-out; 
    -o-transition: background-color 5s ease-out; 
    -moz-transition: background-color 5s ease-out; 
    -ms-transition: background-color 5s ease-out; 
    z-index: 2; 
    -webkit-transition: opacity 0.4s ease-in; 
    -moz-transition: opacity 0.4s ease-in; 
    -o-transition: opacity 0.4s ease-in; 
    -ms-transition: opacity 0.4s ease-in; 
    transition: opacity 0.4s ease-in; 
    opacity: 0.2; 
} 

.menu_out { 
    left: 0px; 
    width: 200px; 
    height: 100%; 
    border-right: 1px solid #F0D4B0; 
    background-color: #002129; 
    z-index: 2; 
    opacity: 1 
} 

這裏的HTML：

<nav class="menu"> 
    <div id="show"> 
     <p>Menu</p> 
    </div> 
    <div id="profile"> 
      <img src="images/glenn.jpg" alt="my face"/> 
      <p>where dreams come true.</p> 
     </div> 
    <ul> 
     <li><a href="index.html">Me</a></li> 
     <li><a href="work.html">Work</a></li> 
     <li><a href="love.html">Love</a></li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul> 
</nav> 

我希望有人能幫幫我！提前致謝。

Answer 1

您指定了2個轉換，第二個（不透明度）不支持第一個轉換。使用此語法可以有多個轉換。

transition: opacity 0.4s ease-in, left 1s ease-in; 

或者你可以使用「全部」時，過渡是所有改變的屬性相同：

transition: all 0.4s ease-in; 

（當然，所有的供應商前綴）

而且你的JS應該是這樣的：

$('#show').click(function(){ 
     $('.content').toggleClass("content_out"); 
     $('.menu').toggleClass("menu_out"); 
    }); 

LIVE DEMO