Css轉換不能與jquery一起工作

Question

我正在嘗試一個左欄隱藏/顯示與轉換。這裏是我的代碼：

JQuery的：

$("[data-toggle='offcanvas']").click(function(e) { 
    e.preventDefault(); 
    $('.left-side').toggleClass("collapse-left"); 
}); 

CSS：

.left-side.collapse-left { 
    left: -220px; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

HTML：

<aside class="left-side sidebar-offcanvas"> 
    <!-- my content--> 
</aside> 

Answer 1

首先， css left屬性對正常f中的元素沒有影響低。您應該通過設置以外的位置屬性值位置該元素，使得left生效爲。其次，過渡發生在一個值到另一個值之間。因此，如果您希望看到轉換，請設置一個默認值，例如left:0。

最後，如果您希望元素在刪除類時有動畫效果，則不應該在正在切換的類中添加transition屬性，而應使用靜態選擇器來設置它。

---

$("#click").click(function(e) { 
 
    e.preventDefault(); 
 
    $('.left-side').toggleClass("collapse-left"); 
 
});

.left-side { 
 
    position: relative; 
 
    left: 0; 
 
    -webkit-transition: all 1s ease-in-out; 
 
    -moz-transition: all 1s ease-in-out; 
 
    -ms-transition: all 1s ease-in-out; 
 
    -o-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 
} 
 
.left-side.collapse-left { 
 
    left: -220px; 
 
} 
 
div { 
 
    min-height: 200px; 
 
    max-width: 200px; 
 
    background: #06F; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="click">click</button> 
 
<aside class="left-side sidebar-offcanvas"> 
 
    <div>This is test</div> 
 
</aside>

Answer 2

你的意思是這樣嗎？

http://jsfiddle.net/99o4k67f/1/

$("#click").click(function(e) { 
    e.preventDefault(); 
    $('.left-side').toggle('slow'); 
}); 

還是更喜歡這樣的：

http://jsfiddle.net/99o4k67f/2/

$("#click").click(function(e) { 
    e.preventDefault(); 
    $('.left-side').animate({width:'toggle'},900); 
}); 

順便說一句，你不需要這方面的任何CSS :)

所有的