부트 스트랩 축소 애니메이션이 부드럽 지 않음

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
    <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-primary">+ addInfo </a>
    <textarea class="form-control collapse" id="collapseOne" rows="4"></textarea>
</div>

<div class="form-group">
    <a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne" class="btn btn-info">+ subtitle </a>
    <input type="text" class="form-control collapse" id="collapseTwo">
</div>

문제는 addInfo탭을 클릭 할 때 를 확장 할 때 점프를 찾을 수 있다는 것입니다. text_area즉, 애니메이션이 부드럽 지 않습니다.

내가 방금 가진 것처럼 다른 사람 이이 문제를 겪는 경우 대답은 축소하려는 콘텐츠를 a 안에 감싸고 div콘텐츠 자체가 아닌 래퍼 div를 축소하는 것입니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
    <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-primary">+ addInfo</a>
    <div id="collapseOne" class="collapse">
        <textarea class="form-control" rows="4"></textarea>
    </div>
</div>

<div class="form-group">
    <a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne" class="btn btn-info">+ subtitle</a>
    <input type="text" class="form-control collapse" id="collapseTwo">
</div>

부모 div ".collapse" 에 패딩이 있을 때 저킹이 발생합니다 .

패딩은 부모가 아닌 자식 div에 적용됩니다. jQuery는 패딩이 아닌 높이에 애니메이션을 적용합니다.

예:

  <div class="form-group">
       <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ addInfo</a>
       <div class="collapse" id="collapseOne" style="padding: 0;">
          <textarea class="form-control" rows="4" style="padding: 20px;"></textarea>
       </div>
  </div>

  <div class="form-group">
    <a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">+ subtitle</a>
    <input type="text" class="form-control collapse" id="collapseTwo">
  </div>

둘 다 보여주는 바이올린

도움이 되었기를 바랍니다.

@CR Rollyson 답변에 추가,

min-height 속성이있는 접을 수있는 div가있는 경우에도 저크가 발생합니다. 직접 접을 수있는 div에서 해당 속성을 제거해보십시오. 접을 수있는 div의 하위 div에서 사용합니다.

<div class="form-group">
    <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ Not Jerky</a>
    <div class="collapse" id="collapseOne" style="padding: 0;">
        <textarea class="form-control" rows="4" style="padding: 20px;">No padding on animated element. Padding on child.</textarea>
    </div>
</div>

깡깡이

저킹을 일으키는 몇 가지 상황이있을 수 있다고 생각합니다. 내 예에서 문제는 애니메이션이 적용되지 않은 자식의 아래쪽 여백을 다룹니다 (애니메이션 부모에 여백 / 패딩이 없더라도). 여백을 제거하면 애니메이션이 부드러워집니다.

<div class="form-group">
    <a for="collapseJerky" data-toggle="collapse" href="#collapseJerky" aria-expanded="true" aria-controls="collapseJerky">+ Jerky</a>
    <div class="collapse" id="collapseJerky" style="margin:0; padding: 0;">
        <textarea class="form-control" rows="4" style="margin-bottom: 20px;">No margin or padding on animated element. Margin on child.</textarea>
    </div>
</div>
<div class="form-group">
    <a data-toggle="collapse" href="#collapseNotJerky" aria-expanded="true" aria-controls="collapseNotJerky">+ Not Jerky</a>
    <div class="collapse" id="collapseNotJerky" style="margin:0 padding: 0;">
        <textarea class="form-control" rows="4" style="margin-bottom: 0;">No margin or padding on animated element or on child.</textarea>
    </div>
</div>
<p>
    Moles and trolls, moles and trolls, work, work, work, work, work. We never see the light of day. This is just content below the "Not Jerky" to show that the animation is smooth.
</p>

깡깡이

이것이 https://stackoverflow.com/a/28375912/5413283 답변되었지만 패딩과 관련하여 원래 답변에는 언급되지 않았지만 여기 https://stackoverflow.com/a/33697157/5413283 .
나는 시각적 표현과 더 깨끗한 코드를 위해 여기에 추가하고 있습니다.

Bootstrap 4에서 테스트 됨 ✓

새 상위 div를 만들고 부트 스트랩 축소를 추가합니다. 클래스를 제거하십시오.textarea

<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
    <textarea class="form-control" rows="4"></textarea>
</div> <!-- // bootstrap class on parent -->

당신이 주변에 공간을 갖고 싶어, 포장 textarea과 패딩 . 추가하지 마십시오 margin. 동일한 문제가 있습니다.

<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
    <div class="py-4"> <!-- padding for textarea -->
        <textarea class="form-control" rows="4"></textarea>
    </div> <!-- // padding for textarea -->
</div> <!-- // bootstrap class on parent -->

부트 스트랩 3에서 테스트 됨 ✓

부트 스트랩 4와 동일합니다. textarewith collapse클래스를 래핑합니다 .

<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
    <textarea class="form-control" rows="4"></textarea>
</div> <!-- // bootstrap class on parent -->

그리고 padding Bootstrap 3의 경우 Bootstrap 4 와 같은 p- * 클래스가 없습니다 . 따라서 직접 만들어야합니다. 사용하지 마십시오 . padding작동 하지 않습니다 margin..

#collapseOne textarea {
    margin: 10px 0 10px 0;
}

각 자식을 래핑하는 것이 아니라 전체 마크 업을 도우미 div로 래핑 하여 내 것이 더 부드러워졌습니다 . 이렇게 :

<div class="accordeonBigWrapper">
    <div class="panel-group accordion partnersAccordeonWrapper" id="partnersAccordeon" role="tablist" aria-multiselectable="false">
         accordeon markup inside...
    </div>
</div>

.collapse태그에 높이를 설정하지 마십시오 . 높이가 CSS로 재정의되면 애니메이션에 영향을줍니다. 올바르게 애니메이션되지 않습니다.

애니메이션이 전혀 발생하지 않는 다르지만 유사한 문제가있는 저와 같은 다른 사람들의 경우 :

내 브라우저 설정에서 접근성을 위해 더 적은 동작을 선호하는 것을 찾을 수 있습니다. 내 브라우저에서 설정을 찾을 수 없었지만 부트 스트랩의 로컬 사본을 다운로드하고 CSS 파일의이 섹션을 주석 처리하여 애니메이션을 작동시킬 수있었습니다.

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    -webkit-transition: none;
    transition: none;
  }
}

축소 div 주변의 패딩은 0이어야합니다.