programing

CSS 디스플레이 속성의 전환

starjava 2023. 6. 1. 21:37

CSS 디스플레이 속성의 전환

저는 현재 CSS '메가 드롭다운' 메뉴를 설계하고 있습니다. 기본적으로 일반 CSS 전용 드롭다운 메뉴이지만 다른 유형의 콘텐츠를 포함하는 메뉴입니다.

현재 CSS 3 전환은 '디스플레이' 속성에 적용되지 않는 것으로 보입니다. 즉, 다음과 같은 전환을 수행할 수 없습니다.display: nonedisplay: block(또는 임의의 조합).

위의 예에서 두 번째 계층 메뉴가 최상위 메뉴 항목 중 하나를 가리키면 '페이드 인'할 수 있는 방법이 있습니까?

전환을 사용할 수 있다는 것을 알고 있습니다.visibility:재산, 하지만 그것을 효과적으로 사용할 방법을 생각해 낼 수 없습니다.

저도 높이를 사용해봤지만, 그것은 비참하게 실패했습니다.

자바스크립트를 사용하여 이것을 달성하는 것이 사소한 일이라는 것도 알고 있지만, 저는 CSS만을 사용하는 것에 도전하고 싶었습니다. 그리고 저는 제가 조금 부족하다고 생각합니다.

개의 전이를 할 수 , 두 번 연 이 수 있 습 니 다 할 결 상 을 전 의 환 니 ▁you 다 ▁conc 있 itions 습 ▁or ▁two ▁trans aten ▁can , atevisibility이번엔 도움이 될 겁니다

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

(벤더 접두사는 다음과 같습니다.)transition재산.)

자세한 내용은 이 기사에 나와 있습니다.

이 작업을 수행하려면 다른 방법으로 요소를 숨겨야 합니다.

두 가지를 모두 배치하여 효과를 달성했습니다.<div>으로 그리고 을 대적으로그숨리것겨설을정다합니진고절▁the다설로 설정합니다.opacity: 0.

만약 당신이 그것을 토글한다면.display의 noneblock다른 요소에 대한 전환은 발생하지 않습니다.

이 문제를 해결하려면 항상 요소를 다음과 같이 하십시오.display: block그러나 다음 방법 중 하나를 조정하여 요소를 숨깁니다.

을 합니다.height0.
을 합니다.opacity0.
다음을 포함하는 다른 요소의 프레임 외부에 요소를 배치합니다.overflow: hidden.

더 많은 솔루션이 있을 수 있지만 요소를 다음으로 전환하면 전환을 수행할 수 없습니다.display: none예를 들어 다음과 같은 작업을 시도할 수 있습니다.

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}

하지만 그것은 효과가 없을 것입니다.제 경험으로 볼 때, 저는 이것이 아무것도 하지 않는다는 것을 알았습니다.

이 때문에 항상 요소를 유지해야 합니다.display: block하지만 다음과 같은 방법을 통해 극복할 수 있습니다.

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

때 하면 CSS 전환을 사용할 수 .display속성, 하지만 CSS 애니메이션은 여전히 잘 작동하므로 해결책으로 사용할 수 있습니다.

예제 코드(메뉴에 적용할 수 있음) 데모:

스타일시트에 다음 CSS를 추가합니다.

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

그리고 나서 적용합니다.fadeIn호버에 ( 물론 설정은 "" "" " " " " " " " " 입니다."" (" " " " " " " ")" "display: block):

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

2019 업데이트 - 페이딩 아웃도 지원하는 방법:

(일부 JavaScript 코드가 필요합니다.)

// We need to keep track of faded in elements so we can apply fade out later in CSS
document.addEventListener('animationstart', function (e) {
  if (e.animationName === 'fade-in') {
      e.target.classList.add('did-fade-in');
  }
});

document.addEventListener('animationend', function (e) {
  if (e.animationName === 'fade-out') {
      e.target.classList.remove('did-fade-in');
   }
});

div {
    border: 5px solid;
    padding: 10px;
}

div:hover {
    border-color: red;
}

.parent .child {
  display: none;
}

.parent:hover .child {
  display: block;
  animation: fade-in 1s;
}

.parent:not(:hover) .child.did-fade-in {
  display: block;
  animation: fade-out 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="parent">
    Parent
    <div class="child">
        Child
    </div>
</div>

않는 대신 CSS 존 지 하 않 콜 대 신 에 있 수 사 습 니 다 할 용 는 우 리 에 재 백 는 니 있 다 습 ▁css ▁instead 수 ▁use ▁we ▁can backs , 사 할 ▁css ▁in 에 ▁call ▁of우 , 리transition-delay소유물.

#selector {
    overflow: hidden;  /* Hide the element content, while height = 0 */
    height: 0;
    opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
    height: auto; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}

그래서 무슨일이야?

때visible클래스가 추가되었습니다. 둘 다height그리고.opacity을 시작합니다(단, 지연없애시작션이(0ms).height하는 데 ).display: block및 ) 및opacity600ms가 소요됩니다.
때visible되었습니다.opacityms ). 즉시() 초기값을 복원합니다(0 ms 지연, 400 ms 지속).display: none(애니메이션 콜백에서).

참고로, 이 접근 방식은 사용하는 것보다 더 좋습니다.visibility이러한 경우, 요소는 여전히 페이지의 공간을 차지하며 항상 적합한 것은 아닙니다.

자세한 예는 이 문서를 참조하십시오.

전환이 비활성화된 이유는 다음과 같습니다.display변경된 이유는 디스플레이가 실제로 수행하는 작업 때문입니다.그것은 부드럽게 애니메이션화될 수 있는 어떤 것도 바꾸지 않습니다.

display: none;그리고.visibility: hidden;완전히 다른 두 가지입니다.
다 보이지 않게 , 둘다요보않만효있과지만가드는게다있, 그것가습니고지을소이를지▁both▁invisible다있▁element,▁with▁but습▁of니.visibility: hidden;여전히 레이아웃에 렌더링되지만, 눈에 보이지 않을 뿐입니다.
공간을 , , , .display요소는 렌더링을 지시하고 그에 따라 공간을 차지합니다.
다른 요소는 해당 공간을 차지하기 위해 자동으로 이동하지 않습니다.숨겨진 요소는 실제 픽셀을 출력으로 렌더링하지 않습니다.

display: none반면에 실제로 요소가 완전히 렌더링되지 않도록 방지합니다.
레이아웃 공간을 차지하지 않습니다.
이 요소가 차지하는 공간의 일부 또는 전부를 차지했을 다른 요소들은 이제 마치 그 요소가 전혀 존재하지 않는 것처럼 그 공간을 차지하도록 조정됩니다.

display또 다른 시각적 속성이 아닙니다.
이것은 요소의 전체 렌더링 모드를 설정합니다. 예를 들어 요소의 렌더링 모드는block,inline,inline-block,table,table-row,table-cell,list-item아니면 뭐든!
은 각각 매우 영향을 그것들을 할 수 있는 입니다.blockinline예를 들어!).

이것이 디스플레이가 변경되면 전환이 비활성화되는 이유입니다(변경 내용이 변경된 후 변경된 경우에도 마찬가지임).none—none단순히 보이지 않는 것이 아니라 렌더링이 전혀 없음을 의미하는 자체 요소 렌더링 모드입니다!).

display는 전환 작업에 사용되는 속성 중 하나가 아닙니다.

변환을 적용할 수 있는 CSS 속성 목록은 애니메이션 CSS 속성을 참조하십시오.CSS 값 및 단위 모듈 레벨 4, 값 결합 참조: 보간 방법에 대한 보간, 추가 및 누적.

CSS 3까지 9.1에 나열되었습니다. CSS의 속성(경고 팝업을 닫기만 하면 됨)

저도 높이를 사용해봤지만, 그것은 비참하게 실패했습니다.

마지막으로 해야 할 일이 있을 때는max-height대신에, 이것은 애니메이션이 가능한 속성입니다(조금 해킹이긴 했지만 효과가 있었습니다). 그러나 복잡한 페이지나 로우엔드 모바일 장치를 사용하는 사용자에게는 매우 위험할 수 있습니다.

저는 이 문제에 대한 더 나은 방법을 찾았습니다, 당신은 CSS 애니메이션을 사용하여 아이템을 보여주는 멋진 효과를 낼 수 있습니다.

.item {
     display: none;
}

.item:hover {
     display: block;
     animation: fade_in_show 0.5s
}

@keyframes fade_in_show {
     0% {
          opacity: 0;
          transform: scale(0)
     }

     100% {
          opacity: 1;
          transform: scale(1)
     }
}

이제 블록 속성에 사용자 지정 애니메이션을 추가할 수 있습니다.

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

데모

가 이데에 메에서변경다니됩가뉴하위는서모다▁from▁in니"에서 변경됩니다.display:nonedisplay:block여전히 희미해지고 있습니다.

CSS 애니메이션으로 페이드 인합니다.

.item {
     display: none;
}

.item:hover {
     display: block;
     animation: fadeIn 0.5s;
}

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

W3C 작업 초안에 따르면 2013년 11월 19일 display애니메이션으로 만들 수 있는 속성이 아닙니다.다행히도.visibility애니메이션 가능합니다.불투명도 전환(JSFidle)과 전환을 연결할 수 있습니다.

HTML:

<a href="http://example.com" id="foo">Foo</a>
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>

CSS:

#foo {
    transition-property: visibility, opacity;
    transition-duration: 0s, 1s;
}

#foo.hidden {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 1s, 0s;
    transition-delay: 0s, 1s;
}

테스트용 JavaScript:

var foo = document.getElementById('foo');

document.getElementById('hide-button').onclick = function () {
    foo.className = 'hidden';
};

document.getElementById('show-button').onclick = function () {
    foo.className = '';
};

하지 않고 .visibility: hidden클릭 가능한 상태로 유지됩니다.

편집: 디스플레이 없음은 이 예에서 적용되지 않습니다.

@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

위에서는 애니메이션 디스플레이의 99%가 차단되도록 설정된 반면 불투명도는 사라집니다.마지막 순간에 표시 속성이 없음으로 설정됩니다.

그리고 가장 중요한 비트는 애니메이션 채우기 모드를 사용하여 애니메이션이 종료된 후 마지막 프레임을 유지하는 것입니다.

.hide {
   animation: hide 1s linear;
   animation-fill-mode: forwards;
}

다음은 두 가지 예입니다. https://jsfiddle.net/qwnz9tqg/3/

나의 깔끔한 자바스크립트 트릭은 전체 시나리오를 두 개의 다른 기능으로 분리하는 것입니다!

준비를 위해 하나의 전역 변수가 선언되고 하나의 이벤트 핸들러가 정의됩니다.

  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

그런 다음 요소를 숨길 때 다음과 같은 것을 사용합니다.

function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}

요소를 다시 표시하기 위해 다음과 같은 작업을 수행합니다.

function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}

지금까지는 효과가 있어요!

저는 오늘 우연히 이것을 만났습니다.position: fixed내가 재사용하던 모달.ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠdisplay: none 막하고, 그고나서막모, 리이을드때, 문리고기에냈, 그그것러습▁and▁it고.z-index(부정적인 값 등) 이상한 일도 했습니다.

저도 사용하고 있었습니다.height: 0height: 100%하지만 모달이 나타났을 때만 효과가 있었습니다.은 이은당신사것같다니습과한용이것▁you다같▁used▁if▁this니를 사용한 것과 같습니다.left: -100%뭐 그런 거.

그때 간단한 답이 있다는 생각이 들었습니다.에트빌라:

먼저, 당신의 숨겨진 모달.주의:height이라0 고확보요세해인을 해 보세요.height전환 시 선언...그것은 있습니다.500ms내 전환보다 더 긴 시간입니다.이것은 나가는 페이드아웃 전환에 영향을 미칩니다. 즉, 모달을 기본 상태로 되돌립니다.

#modal-overlay {
    background: #999;
    background: rgba(33,33,33,.2);
    display: block;
    overflow: hidden;
    height: 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    -webkit-transition: height 0s 500ms, opacity 300ms ease-in-out;
       -moz-transition: height 0s 500ms, opacity 300ms ease-in-out;
            -ms-transition: height 0s 500ms, opacity 300ms ease-in-out;
         -o-transition: height 0s 500ms, opacity 300ms ease-in-out;
        transition: height 0s 500ms, opacity 300ms ease-in-out;
}

둘째, 눈에 보이는 모달입니다.설정 중이라고 합니다..modal-active에▁body 이제더더.height이라100%그리고 저의 변화 또한 변했습니다.나는 그것을 원합니다.height되며, 즉시변것이고경될그고리, 고리▁to,그.opacity가져가기 위해300ms.

.modal-active #modal-overlay {
    height: 100%;
    opacity: 1;
    z-index: 90000;
    -webkit-transition: height 0s, opacity 300ms ease-in-out;
       -moz-transition: height 0s, opacity 300ms ease-in-out;
        -ms-transition: height 0s, opacity 300ms ease-in-out;
         -o-transition: height 0s, opacity 300ms ease-in-out;
            transition: height 0s, opacity 300ms ease-in-out;
}

바로 그거야, 그것은 매력적으로 작동합니다.

이러한 답변 중 몇 가지와 다른 제안을 참고하면, 다음은 호버 메뉴에 적합합니다(특히 부트스트랩 3과 함께 사용).

nav .dropdown-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms, opacity 300ms;
    -webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0, opacity 300ms;
    -webkit-transition: max-height 0, opacity 300ms;
}

은 또한 수있다습니도를 사용할 .height신에를 max-height이후 두 값을 모두 지정하는 경우height:auto는 에허되않과 함께 사용할 수 .transition호 값의 값max-height 야합다보다 .height메뉴의 가능성이 있습니다.

이것은 다음과 같이 간단합니다 :)

@keyframes fadeout {
    0% { opacity: 1; height: auto; }
    90% { opacity: 0; height: auto; }
    100% { opacity: 0; height: 0;
}
animation: fadeout linear 0.5s 1 normal forwards !important;

그것이 희미해지도록 하고, 그리고 나서 그것을 만듭니다.height 0;또한 포워드를 사용하여 최종 상태를 유지해야 합니다.

저는 이 문제를 여러 번 접했고 이제 다음과 같이 간단히 해결했습니다.

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

를 block--invisible전체 요소는 클릭할 수 없지만 뒤에 있는 모든 요소는 다음과 같은 이유로pointer-events:none모든 주요 브라우저에서 지원됩니다(IE < 11 없음).

overflow:hiddenoverflow:visible더 잘 작동합니다.다음과 같이 사용합니다.

#menu ul li ul {
    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul  {
    overflow:visible;
    opacity:1;
    height:140px;
}

visible더 좋은 이유는overflow:hidden똑같이 행동합니다.display:none.

키 프레임을 사용하지 않고 이 상황에서 전환을 적용하는 또 다른 방법은 요소의 너비를 0으로 설정한 다음 호버에서 해제하는 것입니다.

.className{
  visibility:hidden;
  opacity: 0;
  transition: .2s;
  width:0;
}

.className:hover{
  visibility:visible;
  margin-right: .5rem;
  opacity: 1;
  width:unset;
}

모든 답변에 감사드립니다.제가 비슷한 목적으로 사용하는 것은 전환과 애니메이션입니다.

예: https://jsfiddle.net/grinevri/tcod87Le/22/

<div class="animation"></div>
<div class="transition"></div>

@keyframes animationTo {
  0% { background-color: rgba(0, 0, 0, 0.1); }
  100% { background-color: rgba(0, 0, 0, 0.5); }
}

@keyframes animationFrom {
  0% { background-color: rgba(0, 0, 0, 0.5); }
  100% { background-color: rgba(0, 0, 0, 0.1); }
}

.animation,
.transition{
  margin: 5px;
  height: 100px;
  width: 100px;
  background-color: rgba(0, 0, 0, 0.1);
}

.animation{
  animation: animationFrom 250ms;
}

.animation:hover{
  background-color: rgba(0, 0, 0, 0.5);
  animation: animationTo 250ms;
}

.transition{
  transition: background-color 250ms;
}

.transition:hover{
  background-color: rgba(0, 0, 0, 0.5);
}

마침내 저는 제게 맞는 해결책을 찾았습니다.opacity와 함께position absolute(숨겼을 때 공간을 차지하지 않음).

.toggle {
  opacity: 0;
  position: absolute;
  transition: opacity 0.8s;
}

.parent:hover .toggle {
  opacity: 1;
  position: static;
}

JavaScript가 필요하지 않으며 엄청나게 큰 최대 높이가 필요하지 않습니다.대신 다음을 설정합니다.max-height요소에, ▁such와 같은 관계 단위를 하세요.rem또는em이렇게 하면 최대 높이를 용기보다 크게 설정할 수 있으며 메뉴가 닫힐 때 지연이나 "펑"되는 현상을 방지할 수 있습니다.

HTML

<nav>
  <input type="checkbox" />
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</nav>

CSS

nav input + ul li { // Notice I set max-height on li, not ul
   max-height: 0;
}

nav input:checked + ul li {
   max-height: 3rem; // A little bigger to allow for text-wrapping - but not outrageous
}

여기 예를 참조하십시오. http://codepen.io/mindfullsilence/pen/DtzjE

Guillermo의 승인된 답변이 작성된 후, 2012-04-03의 CSS 전환 사양은 가시성 전환의 동작을 변경했으며 이제 전환 지연을 사용하지 않고 더 짧은 방법으로 이 문제를 해결할 수 있습니다.

.myclass > div {
                   transition:visibility 1s, opacity 1s;
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div
               {   visibility:visible; opacity:1 }

일반적으로 두 전환에 대해 지정된 실행 시간은 동일해야 합니다(가시성이 약간 길어도 문제가 되지 않음).

실행 중인 버전은 블로그 게시물 CSS 전환 가시성을 참조하십시오.

W.r.t. "디스플레이의 전환: 속성" 질문의 제목과 수락된 답변에 대한 루이 마르케스와 조쉬의 의견에 대한 답변:

이 솔루션은 디스플레이 또는 가시성 속성이 사용되는 경우와 무관한 경우에 작동합니다(이 질문에서 그랬던 것처럼).

.display:none문서를 보이지 않게 만들기만 하면 문서 흐름에 남아 다음 요소의 위치에 영향을 줍니다.

다과유사요한소완제전거환는하와 유사한 를 완전히 display:none높이(다른 답변 및 의견에 표시된 대로), 최대 높이 또는 여백 위쪽/아래쪽을 사용하여 수행할 수 있지만 높이: 0, 높이: 자동으로 전환하는 방법 및 디스플레이 및 높이 속성에 대한 CSS 전환에 대한 해결 방법 블로그 게시물을 참조하십시오.

George Millo의 의견에 대한 답변: 속성과 전환이 모두 필요합니다.불투명도 속성은 페이드인 및 페이드아웃 애니메이션을 만드는 데 사용되며 가시성 속성은 요소가 마우스 이벤트에서 계속 반응하지 않도록 합니다.시각적 효과를 위한 불투명도와 페이드아웃이 완료될 때까지 숨기기를 지연하는 가시성에 전환이 필요합니다.

한 지 안 된 하지 않는다는 될 입니다. CSS 전차없환시지을속작이마성레스얼플디람안것한전은된사될다니단입알음게동금시것에않방을는수정/하지다는동작하면환이을없▁ic차/을▁just▁anyone▁(▁trans▁if▁discovers▁starting▁quickly것itions다니입▁property될▁css/▁display▁thatnss▁suspect▁theyblock▁you'시동게알▁the금▁don)▁the▁time▁same▁at에방것▁cssone. 한 가지 ▁to▁use▁▁continue다▁can▁you▁thataround▁that것니입아직▁work있▁is다▁hasn를 계속 사용할 수 있다는 것입니다.display:block/none요소를 숨기거나 표시하지만 불투명도를 0으로 설정하여 요소가 비활성화된 경우에도display:block여전히 보이지 않습니다.

그런 다음, 불투명도를 1로 설정하고 불투명도의 전환을 정의하는 "on"과 같은 다른 CSS 클래스를 추가합니다.당신이 상상했듯이, 당신은 요소에 "on" 클래스를 추가하기 위해 JavaScript를 사용해야 하지만, 적어도 당신은 여전히 실제 전환을 위해 CSS를 사용하고 있습니다.

이 두 가지를 다 ,display:block클래스 "on"을 추가하는 동시에 setTimeout을 사용하여 후자를 지연시킵니다.그렇지 않으면 브라우저는 두 가지 작업이 동시에 발생하는 것으로 간주하고 전환을 비활성화합니다.

당신은 디스플레이를 사용하여 이것이 당신이 기대했던 자연스러운 방식으로 작동하도록 할 수 있지만, 자바스크립트를 사용하거나 다른 사람들이 다른 태그 안에 하나의 멋진 속임수를 제안한 것처럼 브라우저가 작동하도록 하기 위해서는 브라우저를 조절해야 합니다.내부 태그는 CSS와 치수를 더 복잡하게 만들기 때문에 신경 쓰지 않습니다. 그래서 Javascript 솔루션은 다음과 같습니다.

https://jsfiddle.net/b9chris/hweyecu4/17/

다음과 같은 상자로 시작:

<div id="box" class="hidden">Lorem</div>

숨겨진 상자.

div.hidden {
    display: none;
}
#box {
    transition: opacity 1s;
}

관련 q/a에서 발견된 트릭을 사용하여 오프셋을 확인합니다.브라우저를 순간적으로 조절하는 높이:

https://stackoverflow.com/a/16575811/176877

첫째, 위의 요령을 공식화한 도서관:

$.fn.noTrnsn = function () {
    return this.each(function (i, tag) {
        tag.style.transition = 'none';
    });
};
$.fn.resumeTrnsn = function () {
    return this.each(function (i, tag) {
        tag.offsetHeight;    
        tag.style.transition = null;
    });
};

다음으로 상자를 표시하고 페이드 인을 표시합니다.

$('#button').on('click', function() {
    var tag = $('#box');
    if (tag.hasClass('hidden'))
        tag.noTrnsn().removeClass('hidden')
        .css({ opacity: 0 })
        .resumeTrnsn().css({ opacity: 1 });
    else
        tag.css({ opacity: 0 });
});

이로 인해 상자가 페이드아웃됩니다.그렇게,.noTrnsn()전을끈 제거니합다다음환을 합니다.hidden뒤집히는 수업displaynone기값으로본입니다.block그런 다음 불투명도를 0으로 설정하여 페이드 인을 준비합니다. 무대를 때문에, 시작합니다, 마니으련했다전는, 시다니작합시환을우이리제..resumeTrnsn()마지막으로 불투명도를 1로 설정하여 전환을 시작합니다.

라이브러리가 없었다면 디스플레이 변경과 불투명도 변경 모두 바람직하지 않은 결과를 얻을 수 있었을 것입니다.도서관 호출만 제거하면 전환이 전혀 되지 않을 것입니다.

위의 내용은 페이드아웃 애니메이션이 끝날 때 디스플레이를 다시 없음으로 설정하지 않습니다.좀 더 화려해질 수 있습니다.0에서 0으로 갈수록 희미해지고 높이가 커지는 것으로 해보겠습니다.

멋쟁이!

https://jsfiddle.net/b9chris/hweyecu4/22/

#box {
    transition: height 1s, opacity 1s;
}

우리는 이제 높이와 불투명도를 모두 전환하고 있습니다.인 설지않습니다하즉정다. 높, 입니기값본이가높를이,▁note다▁height니즉▁not입▁are▁we▁setting,▁that▁default기,값.auto일반적으로 이것은 전환할 수 없습니다. 자동에서 픽셀 값(예: 0)으로 이동하면 전환되지 않습니다.우리는 이 문제를 해결하기 위해 도서관과 한 가지 더 도서관 방법을 사용할 것입니다.

$.fn.wait = function (time, fn) {
    if (time)
        this.delay(time);
    if (!fn)
        return this;

    var _this = this;
    return this.queue(function (n) {
        fn.call(_this);
        n();
    });
};

이것은 jQuery 3.x에서 제외된 애니메이션 프레임워크 없이 jQuery의 기존 fx/애니메이션 큐에 참여할 수 있는 편리한 방법입니다.가 어떻게 작동하는지 , 는 jQuery가어떻설지는하않명지는하겠만지다있, 분히말수습니할충게동작▁to▁i,▁theququ다▁j▁say있니습▁how,수..queue()그리고..stop()jQuery가 제공하는 배관은 우리의 애니메이션이 서로를 밟는 것을 방지하는 데 도움이 됩니다.

슬라이드 다운 효과를 애니메이션으로 만들어 보겠습니다.

$('#button').on('click', function() {
    var tag = $('#box');
    if (tag.hasClass('hidden')) {
        // Open it
        // Measure it
        tag.stop().noTrnsn().removeClass('hidden').css({
            opacity: 0, height: 'auto'
        });
        var h = tag.height();
        tag.css({ height: 0 }).resumeTrnsn()
        // Animate it
        .css({ opacity: 1, height: h })
        .wait(1000, function() {
            tag.css({ height: 'auto' });
        });
    } else {
        // Close it
        // Measure it
        var h = tag.noTrnsn().height();
        tag.stop().css({ height: h })
        .resumeTrnsn()
        // Animate it
        .css({ opacity: 0, height: 0 })
        .wait(1000, function() {
            tag.addClass('hidden');
        });
    }
});

는 이코는체온시다니작합으로크드▁on▁begins에 체크하는 합니다.#box클래스를 확인하여 현재 숨겨져 있는지 여부를 확인합니다.하지만 이를 통해 더 많은 것을 달성할 수 있습니다.wait() 호출, 라브러호출, 추를통해를 hidden슬라이드 아웃/슬라이드 애니메이션의 마지막 부분에 있는 클래스로, 실제로 숨겨져 있으면 찾을 수 있습니다. 위의 간단한 예에서는 찾을 수 없습니다.이렇게 하면 숨겨진 클래스가 복원되지 않았기 때문에 이전 예제에서 버그였던 요소를 계속해서 표시/숨길 수도 있습니다.

또한 CSS와 클래스 변경이 다음으로 호출되는 것을 볼 수 있습니다..noTrnsn()일반적으로 측정을 포함하여 애니메이션을 위한 무대를 설정합니다. 예를 들어, 최종 높이를 측정하는 것과 같습니다.#box전화하기 전에 사용자에게 그것을 보여주지 않고..resumeTrnsn()그리고 완전히 설정된 단계에서 목표 CSS 값까지 애니메이션화합니다.

오래된 대답

https://jsfiddle.net/b9chris/hweyecu4/1/

클릭하면 다음 기능으로 전환할 수 있습니다.

function toggleTransition() {
  var el = $("div.box1");

  if (el.length) {
    el[0].className = "box";
    el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
        el[0].className = "box hidden";
    });
  } else {
    el = $("div.box");
    el[0].className = "box";
    el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
        el[0].className = "box box1";
    });
  }

  return el;
}

someTag.click(toggleTransition);

CSS는 다음과 같이 추측할 수 있습니다.

.hidden {
    display: none;
}
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 20px;
    top: 20px;
    position: absolute;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scale(.2);
    transform: scale(.2);
    -webkit-transition: transform 2s;
    transition: transform 2s;
}
.box1{
    -webkit-transform: scale(1);
    transform: scale(1);
}

핵심은 디스플레이 속성을 조절하는 것입니다.숨겨진 클래스를 제거하고 50ms를 기다린 다음 추가된 클래스를 통해 전환을 시작하면 애니메이션 없이 화면에 깜박이는 대신 원하는 대로 표시되고 확장됩니다.애니메이션이 끝날 때까지 기다렸다가 숨겨진 상태로 적용하는 것을 제외하고는 유사한 현상이 발생합니다.

제가 요..animate(maxWidth)setTimeout인종 조건 setTimeout사용자 또는 다른 사용자가 코드를 인식하지 못할 때 숨겨진 버그를 빠르게 도입합니다. .animate()로 쉽게 죽을 수 있습니다..stop()표준 fx 대기열에 50 ms 또는 2000 ms 지연을 추가하기 위해 사용하고 있습니다. 여기에 다른 코더 빌딩을 추가하여 쉽게 찾고 해결할 수 있습니다.

답을 찾을 수 없는 비슷한 문제가 있었습니다.몇 번의 구글 검색이 나중에 저를 여기로 이끌었습니다.제가 바라던 간단한 답을 찾지 못한 것을 생각하면, 우아하면서도 효과적인 해결책을 우연히 발견했습니다.

알고 보니visibility의 값은 CSS 속성있습다입니다.collapse일반적으로 테이블 항목에 사용됩니다.그러나 다른 요소에 사용될 경우 효과적으로 숨겨진 요소로 렌더링됩니다.display: hidden그러나 요소가 공간을 차지하지 않고 문제의 요소를 애니메이션으로 만들 수 있다는 추가 기능이 있습니다.

다음은 이에 대한 간단한 실행 예입니다.

function toggleVisibility() {
  let exampleElement = document.querySelector('span');
  if (exampleElement.classList.contains('visible')) {
    return;
  }
  exampleElement.innerHTML = 'I will not take up space!';
  exampleElement.classList.toggle('hidden');
  exampleElement.classList.toggle('visible');
  setTimeout(() => {
    exampleElement.classList.toggle('visible');
    exampleElement.classList.toggle('hidden');
  }, 3000);
}

#main {
  display: flex;
  flex-direction: column;
  width: 300px;
  text-align: center;
}

.hidden {
  visibility: collapse;
  opacity: 0;
  transition: visibility 2s, opacity 2s linear;
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.5s, opacity 0.5s linear;
}

<div id="main">
  <button onclick="toggleVisibility()">Click Me!</button>
  <span class="hidden"></span>
  <span>I will get pushed back up...</span>
</div>

가장 인 해결책은 과 같습니다.하세요.display:none에서, 을 하만당에 CSS서, 당은그바꿀것입다니로 바꿀 입니다.blockJavaScript를 사용하여 (또는 그 밖의 모든 것을) 수행한 다음 setTimeout()으로 실제로 전환하는 클래스를 문제의 요소에 추가해야 합니다.이상입니다.

예:

<style>
    #el {
        display: none;
        opacity: 0;
    }
    #el.auto-fade-in {
        opacity: 1;
        transition: all 1s ease-out; /* Future, future, please come sooner! */
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
    }
</style>

<div id=el>Well, well, well</div>

<script>
    var el = document.getElementById('el');
    el.style.display = 'block';
    setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>

이것은 최신 정상 브라우저에서 테스트되었습니다.Internet Explorer 9 이전 버전에서는 사용할 수 없습니다.

저는 SalmanPK가 가장 가까운 답을 가지고 있다고 생각합니다.다음 CSS 애니메이션을 사용하여 항목을 페이드 인 또는 페이드 아웃합니다.그러나 디스플레이 속성은 부드럽게 애니메이션화되지 않고 불투명도만 표시됩니다.

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@-webkit-keyframes fadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

만약 당신이 디스플레이 블록에서 디스플레이 블록으로 이동하는 요소를 애니메이션화하고 싶다면, 나는 CSS만으로는 현재 그것이 가능하다고 볼 수 없습니다.당신은 높이를 얻고 CSS 애니메이션을 사용하여 높이를 줄여야 합니다.이것은 아래의 예와 같이 CSS를 사용하면 가능하지만 요소에 대해 애니메이션을 만드는 데 필요한 정확한 높이 값을 아는 것은 어려울 것입니다.

jsFiddle 예

CSS

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

자바스크립트

var element = document.getElementById("element");

// Push item down
element.className = element.className + " push-down";

이 솔루션은 호환성이 뛰어나며 아직 본 적이 없습니다.

.hidden-element {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .5s ease-out;
}

.hidden-element.visible {
  position: static;
  z-index: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

설명: 다음을 사용합니다.visibility: hidden에서 "쇼 앤 애니메이트됨), 은 트한(쇼단서과 "이션메 "앤호니 "환됨애 "사릭에 "다계은 "을합용 "조니합 "나것 "그그러 " -▁(과), "됨▁the▁trick " ateshow-쇼▁comb▁inination사용합 "라는 조합을 사용함)을 사용합니다.position: absolute; z-index: -1; pointer-events: none;숨겨진 컨테이너가 공간을 차지하지 않고 사용자 상호 작용에 응답하지 않도록 합니다.

전환 이벤트를 사용하여 이 작업을 수행할 수 있습니다. 따라서 전환을 위한 두 개의 CSS 클래스를 구축합니다. 하나는 애니메이션을 다른 하나는 보류하고, 디스플레이는 없음 상태를 유지합니다.그리고 애니메이션이 끝난 후에 그것들을 바꾸십니까?내 경우 버튼을 누르고 두 클래스를 모두 제거하면 div를 다시 표시할 수 있습니다.

아래에 있는 스니펫을 사용해 보십시오.

$(document).ready(function() {
  // Assign transition event
  $("table").on("animationend webkitAnimationEnd", ".visibility_switch_off", function(event) {
    // We check if this is the same animation we want
    if (event.originalEvent.animationName == "col_hide_anim") {
      // After the animation we assign this new class that basically hides the elements.
      $(this).addClass("animation-helper-display-none");
    }

  });

  $("button").click(function(event) {

    $("table tr .hide-col").toggleClass(function() {
      // We switch the animation class in a toggle fashion...
      // and we know in that after the animation end, there
      // is will the animation-helper-display-none extra
      // class, that we nee to remove, when we want to
      // show the elements again, depending on the toggle
      // state, so we create a relation between them.
      if ($(this).is(".animation-helper-display-none")) {
        // I'm toggling and there is already the above class, then
        // what we want it to show the elements , so we remove
        // both classes...
        return "visibility_switch_off animation-helper-display-none";
      }
      else {
        // Here we just want to hide the elements, so we just
        // add the animation class, the other will be added
        // later be the animationend event...
        return "visibility_switch_off";
      }
    });
  });
});

table th {
  background-color: grey;
}

table td {
  background-color: white;
  padding: 5px;
}

.animation-helper-display-none {
  display: none;
}

table tr .visibility_switch_off {
  animation-fill-mode: forwards;
  animation-name: col_hide_anim;
  animation-duration: 1s;
}

@-webkit-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes col_hide_anim {
  0%   {opacity: 1;}
  100% {opacity: 0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <theader>
    <tr>
      <th>Name</th>
      <th class='hide-col'>Age</th>
      <th>Country</th>
    </tr>
  </theader>
  <tbody>
    <tr>
      <td>Name</td>
      <td class='hide-col'>Age</td>
      <td>Country</td>
    </tr>
  </tbody>
</table>

<button>Switch - Hide Age column with fadeout animation and display none after</button>

사하는대를 사용하는 에.display필요할 때까지 요소를 '화면 밖'에 저장한 다음 원하는 위치로 설정하고 동시에 변환할 수 있습니다.하지만 이로 인해 다른 많은 디자인 문제가 발생하므로 주행 거리가 달라질 수 있습니다.

당은아사싶않것입다니을지고용하신도마다를 사용하고 싶지 않을 display어쨌든, 대부분의 경우 가시성 규칙을 준수하려고 하는 스크린 리더가 콘텐츠에 액세스하기를 원하기 때문입니다. 즉, 콘텐츠가 눈에 보이지 않아야 하는 경우 에이전트에게 콘텐츠로 표시되지 않습니다.

언급URL : https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property

'programing' 카테고리의 다른 글

CSS를 사용하여 HTML 입력의 자리 표시자 색 변경 (0)	2023.06.01
루비의 CSV로 배열 출력 (0)	2023.06.01
NSInteger를 NSString 데이터 유형으로 변환하려면 어떻게 해야 합니까? (0)	2023.06.01
터미널에서 swift를 사용하려면 어떻게 해야 합니까? (0)	2023.05.27
깃허브에서 출발지와 상류의 차이점은 무엇입니까? (0)	2023.05.27

현재글CSS 디스플레이 속성의 전환

각종 프로그래밍 정보를 다루는 블로그입니다.

sql-server, angular, mongoDB, Git, Excel, Ajax, angularjs, Spring-Boot, C, bash, jquery, MySQL, WordPress, reactjs, oracle, JSON, Python, MariaDB, ASP.NET, VB.NET,

Today :
Yesterday :

starjava

CSS 디스플레이 속성의 전환

CSS 디스플레이 속성의 전환

2019 업데이트 - 페이딩 아웃도 지원하는 방법:

멋쟁이!

오래된 대답

CSS

자바스크립트

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/10 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

CSS 디스플레이 속성의 전환

CSS 디스플레이 속성의 전환

2019 업데이트 - 페이딩 아웃도 지원하는 방법:

멋쟁이!

오래된 대답

CSS

자바스크립트

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바