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: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

당신은이 같은 뜻?

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

이상이 같은

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

:

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

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

, BTW 당신은이에 대한 CSS : 모든