Bootstrap의 축소 열기 / 닫기 애니메이션 비활성화

Bootstrap의 축소 열기 / 닫기 애니메이션 비활성화

---

이 질문에 이미 답변이 있습니다.

• Twitter Bootstrap Navbar 전환 애니메이션 끄기 6 답변

그룹 축소의 열기 / 닫기 애니메이션을 비활성화하는 트릭이 있습니까?

---

Bootstrap 3 및 4 의 경우

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

---

Bootstrap 2 CSS 솔루션 :

.collapse {  transition: height 0.01s; }  

주의 : 설정 transition: none은 축소 기능을 비활성화합니다.

---

Bootstrap 4 해결책:

.collapsing {
  transition: none !important;
}

---

당신이 찾아내는 경우에 1 픽셀 확장 이전과 CSS 솔루션 a는 성가신 비트 사용할 때 붕괴 후 점프, 여기에 간단 자바 스크립트 에 대한 솔루션 부트 스트랩 3 ...

코드 어딘가에 다음을 추가하십시오.

$(document).ready(
    $('.collapse').on('show.bs.collapse hide.bs.collapse', function(e) {
        e.preventDefault();
    }),
    $('[data-toggle="collapse"]').on('click', function(e) {
        e.preventDefault();
        $($(this).data('target')).toggleClass('in');
    })
);

---

질문에 대한 직접적인 대답은 아니지만 공식 문서에 최근 추가 된 내용은 jQuery를 사용하여 전환을 완전히 비활성화하는 방법을 설명합니다 .

$.support.transition = false

---

수락 된 답변에 언급 된대로.collapsing CSS 전환을 없음 으로 설정하면 애니메이션이 제거되었습니다. 그러나 이것은 Firefox와 Chromium에서 navbar의 축소에 원치 않는 시각적 문제를 만듭니다.

예를 들어 Bootstrap navbar 예제를 방문 하여 수락 된 답변에서 CSS를 추가합니다.

.collapsing {
     -webkit-transition: none;
     transition: none;
}

현재 내가보고있는 것은 navbar가 축소 될 때 navbar의 하단 테두리가 일시적으로 1 픽셀이 아닌 2 픽셀이 된 다음 당황스럽게 다시 1 픽셀로 이동하는 것입니다. jQuery를 사용하면이 아티팩트가 나타나지 않습니다.

참고 URL : https://stackoverflow.com/questions/13119912/disable-bootstraps-collapse-open-close-animation