콘텐츠가 동적으로 변경될 때 CSS로 요소의 너비에 애니메이션을 적용하는 방법은 무엇입니까?

CSS 자동 너비로 콘텐츠 크기에 애니메이션 적용

질문

콘텐츠가 변경될 때 width: auto를 사용하여 요소의 너비에 어떻게 애니메이션을 적용할 수 있나요? 콘텐츠는 동적으로 변경되며 요소의 너비는 애니메이션에 따라 변경되어야 합니다.

답변

CSS는 자동 값 애니메이션을 직접 지원하지 않지만 이 효과를 얻기 위한 두 가지 접근 방식이 있습니다.

1. 최대 너비/최대 높이 트릭

• 가능한 가장 넓은 콘텐츠를 수용할 수 있을 만큼 큰 고정된 최대 너비 또는 최대 높이를 요소에 제공합니다.
• 예:

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  max-width: 500px; /* Set a sufficiently large max-width */
}

2. 스크립트 기반 너비 설정

• JavaScript 또는 다른 스크립트 언어를 사용하여 콘텐츠가 변경될 때 요소의 너비를 동적으로 설정합니다.
• 이 접근 방식을 사용하면 너비 변경을 보다 정확하게 제어할 수 있습니다. .
• 예를 들어( jQuery):

$(document).ready(function() {
  $(".myspan").hover(function() {
    $(this).width($(this).find("span").outerWidth());
  }, function() {
    $(this).width("auto");
  });
});

호버 효과의 예

max-width/max-height 트릭을 사용하여 요소의 너비가 호버 시 애니메이션되는 간단한 예를 만들 수 있습니다.

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  vertical-align: bottom;
}

.myspan::after {
  content: " <pre class="brush:php;toolbar:false"><link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

<span class="myspan">Hello!</span>

a0\f12a "; font-family: ionicons; font-size: 80%; display: inline-block; max-width: 0; transition: max-width .6s; vertical-align: bottom; overflow: hidden; } .myspan:hover::after { max-width: 80px; transition: max-width 1s; }

위 내용은 콘텐츠가 동적으로 변경될 때 CSS로 요소의 너비에 애니메이션을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!