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

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

<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탭,은을를수다을enpg,badu수d탭,은서을를text_area매끄럽지 . , 은 은 .

만약 다른 사람이 이 문제를 발견했을 경우, 제가 방금 전에 한 것처럼, 답은 당신이 붕괴하기를 원하는 내용을 a 안에 포장하는 것입니다.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"에 패딩이 있을 때 발생합니다.

패딩은 부모님이 아니라 차일드 디브에게 적용됩니다. 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 롤리슨 답변에 추가하면,

최소 높이 속성을 가진 접이식 디바가 있는 경우에는 저킹도 발생합니다.직접 접을 수 있는 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 에 언급되어 있습니다.
저는 시각적인 프레젠테이션과 더 깨끗한 코드를 위해 여기에 추가하는 것입니다.

부트스트랩 4에서 테스트 완료 ✓

새 부모 분할을 생성하고 부트스트랩 축소를 추가합니다.스거거에서 클래스 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와 같습니다.을 .textare와 함께collapse수업.

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

는.padding 부트스트랩 3은 부트스트랩 4처럼 p-* 클래스가 없기 때문에 자신만의 클래스를 만들어야 합니다.사용하지않음padding다를 사용합니다. 사용합니다.margin.

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

접히는 디바 주위의 패딩은 0이어야 합니다.

아이들 한 명 한 명을 포장하는 것이 아니라 전체 마크업을 헬퍼디브로 포장하는 것으로 제 것은 더 부드러워졌습니다.다음과 같은 경우:

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

를 하지 에 ..collapsetag.을 미치며.tag. 높이가 CSS로 재정의되면 애니메이션에 영향을 미치며 올바르게 애니메이션화되지 않습니다.

저처럼 애니메이션이 전혀 발생하지 않는 다른 문제가 있지만 비슷한 문제가 있었던 다른 사람들에게:

내 브라우저 설정에서 접근성을 위해 움직임이 적은 것을 선호하는 것을 발견할 수 있었습니다.브라우저에서 아무런 설정을 찾을 수 없었지만 부트스트랩의 로컬 복사본을 다운로드하고 CSS 파일의 이 섹션에 주석을 달아 애니메이션을 작동시킬 수 있었습니다.

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

편집: 부트스트랩 5.0.2 for vue

저는 이 사실을 알게 되었고, 그것이 저에게 부드러운 애니메이션을 갖게 해주었습니다.

이것을 컴포넌트의 CSS에 추가했습니다.

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition-property: height, visibility;
    transition-duration: 0.35s;
  }
}

나도 같은 문제를 겪었고 알아차렸습니다. 나는 100% 높이를 붕괴하는 디브 요소로 설정했습니다.

<div>
  <button
    class="btn btn-primary"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#collapseExample"
    aria-expanded="false"
    aria-controls="collapseExample"
  >
    Button with data-target
  </button>
     
  <div  never_put_height_in_this_element class="collapse" id="collapseExample">
 
  <div class="card card-body">
    <p>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
      terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
      labore wes anderson cred nesciunt sapiente ea proident.
    </p>
  </div>
</div>

언급URL : https://stackoverflow.com/questions/27221332/bootstrap-collapse-animation-not-smooth