>

저는 작업중인 워드 프레스 사이트에서 저자의 바이오 설명을 위해 자바 스크립트로 "더 읽기/읽기"축소 버튼을 만들었습니다.

전환 CSS 효과가 작동하지 않는 것을 제외하고는 축소 가능합니다. 이 테스트를 해본 결과 텍스트를 축소 할 때 높이가 "자동"으로 설정 되었기 때문입니다. 텍스트의 길이를 알 수 없기 때문입니다.

높이를 숫자로 설정하면 전환이 작동합니다. 그러나 나는 자동으로 설정해야합니다.

여기는 바이올린입니다 : https://jsfiddle.net/brsastre/jo29pfm8/

p {
  height: 30px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
p.uncollapsed {
  height: auto;
}

  • 답변 # 1

    불행하게도 "auto"차원에서 애니메이션을 만들 수 없습니다. 애니메이션을 적용하려면 높이를 사용해야합니다. 해결책은 다음과 같습니다.

    p {
      height: 30px;
        overflow: hidden;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    p.uncollapsed {
      height: 80px;
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
    
    

  • 답변 # 2

    height: auto 로 전환 할 수 없습니다 가장 멋진 트릭 중 하나는 max-height 를 애니메이션하는 것입니다.   height: auto 의 동일한 효과를 얻기 위해 .

    그런 것 :

    var button = document.getElementById("button");
    button.onclick = function() {
      var text = document.getElementById("text");
      text.classList.add("uncollapsed");
    };
    
    

    p {
      max-height: 30px;
      overflow: hidden;
      transition: max-height 0.5s ease;
    }
    p.uncollapsed {
      max-height: 100px;
    }
    
    

    <p id="text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem obcaecati tenetur voluptates asperiores vero necessitatibus incidunt magni beatae debitis. Libero error, ab. Debitis odit, nulla blanditiis obcaecati assumenda eveniet. Nesciunt. Lorem
      ipsum dolor sit amet, consectetur adipisicing elit. Dolorem libero provident beatae qui minima iusto, corrupti quidem nam iste alias dicta? Cupiditate quidem neque dolores distinctio quam commodi inventore provident.
    </p>
    <button id="button">button</button>
    
    

  • 답변 # 3

    height: auto 때문에 작동하지 않습니다 . 이것을 시도하십시오 :

    p {
       height: 30px;
       overflow: hidden;
       -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
       transition: all 0.5s ease;
    }
    p.uncollapsed {
      height: 100px;
    }
    
    

  • 이전 android - 레이아웃 버튼이 배경에 해당
  • 다음 numpy - Cython에서 배열의 합 배열