질문자 :RichardTape
저는 현재 CSS '메가 드롭다운' 메뉴를 디자인 중입니다. 기본적으로 일반 CSS 전용 드롭다운 메뉴이지만 다른 유형의 콘텐츠가 포함된 메뉴입니다.
현재 CSS 3 전환은 'display' 속성에 적용되지 않는 것으로 보입니다 display: none 에서 display: block (또는 모든 조합)으로의 전환을 수행할 수 없습니다.
누군가가 최상위 메뉴 항목 중 하나 위에 마우스를 올려 놓으면 위의 예에서 두 번째 계층 메뉴가 '페이드 인'되는 방법이 있습니까?
visibility: 속성에 전환을 사용할 수 있다는 것을 알고 있지만 이를 효과적으로 사용할 방법이 생각나지 않습니다.
나는 또한 높이를 사용해 보았지만 비참하게 실패했습니다.
또한 JavaScript를 사용하여 이를 달성하는 것이 쉽지 않다는 것을 알고 있지만 CSS만 사용하는 데 도전하고 싶었습니다.
두 개 이상의 전환을 연결할 수 있으며 visibility 이 편리합니다.
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> 절대적으로 배치하고 숨겨진 것을 opacity: 0 설정하여 효과를 달성했습니다.
display 속성을 none 에서 block 전환하더라도 다른 요소에서 전환이 발생하지 않습니다.
이 문제를 해결하려면 요소가 항상 display: block 으로 표시되도록 허용하되 다음 방법 중 하나를 조정하여 요소를 숨깁니다.
height 를 0 설정합니다.opacity 를 0 설정합니다.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; }이 게시물을 작성하는 시점에서 모든 주요 브라우저는 display 속성을 변경하려고 하면 CSS 전환을 비활성화하지만 CSS 애니메이션은 여전히 제대로 작동하므로 해결 방법으로 사용할 수 있습니다.
예제 코드 (메뉴에 적절하게 적용할 수 있음) 데모 :
스타일시트에 다음 CSS를 추가합니다.
@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } 그런 다음 부모 호버(그리고 물론 set display: block ) fadeIn
.parent:hover .child { display: block; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; }(일부 자바스크립트 코드가 필요합니다)
// 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에 없는 콜백 대신 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 지체없이 시작 애니메이션 (0 MS)는, 비록 height (당량 완전한 애니메이션 0 MS 얻어 display: block ) 및 opacity 600 밀리 초 걸린다.
visible 클래스가 제거되면 opacity 는 애니메이션을 시작하고(0ms 지연, 400ms 지속 시간) 높이는 400ms를 기다린 다음 즉시(0ms) 초기 값을 복원합니다( display: none 와 동일: 애니메이션 콜백에서 없음).
visibility 사용하는 접근 방식보다 낫습니다. 이러한 경우 요소는 여전히 페이지의 공간을 차지하며 항상 적합한 것은 아닙니다.
더 많은 예를 보려면 이 문서 를 참조하십시오.
display 가 변경되면 전환이 비활성화되는 이유 는 디스플레이가 실제로 수행하는 작업 때문이라고 생각합니다. 매끄럽게 애니메이션될 수 있는 것은 변경되지 않습니다.
display: none; visibility: hidden; 완전히 다른 두 가지입니다.
둘 다 요소를 보이지 않게 만드는 효과가 있지만 visibility: hidden; 여전히 레이아웃에 렌더링되지만 눈에 띄게 그렇지는 않습니다.
숨겨진 요소는 여전히 공간을 차지하며 여전히 인라인으로 렌더링되거나 블록, 블록 인라인 또는 테이블 또는 display 요소가 렌더링하도록 지시하는 모든 것으로 렌더링되고 그에 따라 공간을 차지합니다.
다른 요소는 해당 공간을 차지하기 위해 자동으로 이동 하지 않습니다. 숨겨진 요소는 실제 픽셀을 출력으로 렌더링하지 않습니다.
display: none 은 반면에 실제로 요소가 완전히 렌더링되는 것을 방지 합니다.
그것은 어떤 레이아웃 공간을 차지하지 않습니다.
이 요소가 차지하는 공간의 일부 또는 전체를 차지했을 다른 요소는 이제 해당 요소 가 전혀 존재하지 않는 것처럼 해당 공간을 차지하도록 조정됩니다.
display 는 또 다른 시각적 속성이 아닙니다.
block , inline , inline-block , table , table-row , table-cell , list-item 등 요소의 전체 렌더링 모드를 설정합니다.
각각은 매우 다른 레이아웃 파급효과를 가지고 있으며 애니메이션을 적용하거나 원활하게 전환할 수 있는 합리적인 방법이 없습니다(예를 들어 block 에서 inline
이것이 디스플레이가 변경되면 전환이 비활성화되는 이유입니다(변경 사항이 none 변경되더라도 - none 은 단순히 보이지 않는 것이 아니라 렌더링이 전혀 없음을 의미하는 자체 요소 렌더링 모드입니다!).
display 는 전환이 작동하는 속성 중 하나가 아닙니다.
전환을 적용할 수 있는 CSS 속성 목록은 애니메이션 가능한 CSS 속성 을 참조하세요. 보간 방법은 CSS 값 및 단위 모듈 레벨 4, 값 결합: 보간, 추가 및 누적 을 참조하십시오.
CSS 3까지는 9.1에 나열되어 있습니다. CSS의 속성 (경고 팝업 닫기)
나는 또한 높이를 사용해 보았지만 비참하게 실패했습니다.
마지막으로 이 작업을 수행해야 했을 max-height 대신 사용했지만(약간의 해킹이었지만 작동했습니다) 복잡한 페이지나 낮은 사용자에게는 매우 버벅거릴 수 있습니다. - 모바일 장치를 종료합니다.
이제 블록 속성에 사용자 정의 애니메이션을 추가할 수 있습니다.
@keyframes showNav { from {opacity: 0;} to {opacity: 1;} } .subnav-is-opened .main-nav__secondary-nav { display: block; animation: showNav 250ms ease-in-out both; } 이 데모에서 하위 메뉴는 display:none 에서 display:block 으로 변경되지만 여전히 페이드 처리됩니다.
이 문제에 대한 더 나은 방법을 찾았습니다. 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) } }W3C 작업 초안에 따르면 2013년 11월 19일 display 는 애니메이션 가능한 속성 이 아닙니다. 다행히 visibility 은 애니메이션 가능합니다. 불투명도 전환( JSFiddle )으로 전환을 연결할 수 있습니다.
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%가 차단되도록 설정된다는 것입니다. 마지막 순간에 표시 속성이 없음으로 설정됩니다.
그리고 가장 중요한 것은 animation-fill-mode: forwards를 사용하여 애니메이션이 끝난 후 마지막 프레임을 유지하는 것입니다.
.hide { animation: hide 1s linear; animation-fill-mode: forwards; }다음은 두 가지 예입니다. https://jsfiddle.net/qwnz9tqg/3/
내 멋진 JavaScript 트릭은 전체 시나리오를 두 개의 다른 기능으로 분리하는 것입니다 !
준비를 위해 하나의 전역 변수가 선언되고 하나의 이벤트 핸들러가 정의됩니다.
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 및 애니메이션을 적용했습니다. 방금 외관으로 뛰어올랐고 z-index (음수 값 등)도 이상한 일을 했습니다.
나는 또한 height: 0 to height: 100% 하고 있었지만 모달이 나타날 때만 작동했습니다. left: -100% 또는 무언가를 사용한 것과 같습니다.
그러자 간단한 답이 있다는 생각이 들었습니다. 그리고 짜잔:
먼저 숨겨진 모달입니다. height 가 0 height 선언을 확인하십시오 500ms 가 있는데 이는 내 opacity 전환 보다 깁니다. 이것은 나가는 페이드 아웃 전환에 영향을 미친다는 것을 기억하십시오. 모달을 기본 상태로 되돌립니다.
#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 가 즉시 변경되고 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; }그게 다야, 그것은 매력처럼 작동합니다.
이러한 답변 중 몇 가지와 다른 곳의 몇 가지 제안을 바탕으로 다음은 호버 메뉴에 적합합니다( 특히 Bootstrap 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:auto transition s에서 허용되지 않으므로 두 값을 모두 지정하면 max-height 대신 height 를 사용할 수도 있습니다. max-height 의 호버 값은 가능한 메뉴 height 보다 커야 합니다.
overflow:hidden 을 overflow: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; } overflow:hidden display:none 과 똑같이 작동 visible 이 더 좋습니다.
나는이 문제를 여러 번 겪었고 이제는 단순히 다음과 같이 갔다.
.block { opacity: 1; transition: opacity 250ms ease; } .block--invisible { pointer-events: none; opacity: 0; } block--invisible 을 추가하면 전체 요소를 클릭할 수 없지만 그 뒤에 있는 모든 요소는 모든 주요 브라우저(IE < 11 pointer-events:none
opacity 와 position absolute 를 결합하여 마침내 솔루션을 찾았습니다(숨겨진 경우 공간을 차지하지 않음).
.toggle { opacity: 0; position: absolute; transition: opacity 0.8s; } .parent:hover .toggle { opacity: 1; position: static; }JavaScript는 필요하지 않으며 엄청나게 큰 최대 높이가 필요하지 않습니다. 대신 max-height 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 전환 사양이 가시성 전환의 동작을 변경했으며 이제 transition-delay를 사용하지 않고 이 문제를 더 짧은 방법으로 해결할 수 있습니다.
.myclass > div { transition:visibility 1s, opacity 1s; visibility:hidden; opacity:0 } .myclass:hover > div { visibility:visible; opacity:1 }두 전환에 대해 지정된 실행 시간은 일반적으로 동일해야 합니다(가시성을 위해 약간 더 긴 시간은 문제가 되지 않지만).
실행 중인 버전은 내 블로그 게시물 CSS Transition Visibility 를 참조하십시오.
"디스플레이의 전환: 속성" 이라는 질문의 제목을 작성하고 Rui Marques와 josh가 허용된 답변에 대한 의견에 대한 응답으로:
이 솔루션은 표시 또는 가시성 속성이 사용되는지 여부와 관련이 없는 경우에 작동합니다(이 질문의 경우일 수 있음).
display:none 으로 요소를 완전히 제거하지 않고 보이지 않게 만들지만 여전히 문서 흐름에 남아 다음 요소의 위치에 영향을 줍니다.
display:none 과 유사한 요소를 완전히 제거하는 전환은 height(다른 답변 및 주석으로 표시됨), max-height 또는 margin-top/bottom을 사용하여 수행할 수 있지만, How can I transition height: 0; 높이: 자동; CSS를 사용하여? 및 내 블로그 게시물 디스플레이 및 높이 속성에 대한 CSS 전환에 대한 해결 방법 .
GeorgeMillo의 의견에 대한 응답으로: 두 속성과 두 전환이 모두 필요합니다. opacity 속성은 페이드 인 및 페이드 아웃 애니메이션을 만드는 데 사용되며 가시성 속성은 요소가 마우스 이벤트에 여전히 반응하지 않도록 하는 데 사용됩니다. 시각 효과의 불투명도와 페이드 아웃이 완료될 때까지 숨기기를 지연하려면 가시성에 전환이 필요합니다.
다음과 같이 간단합니다. :)
@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; . 또한 forward를 사용하여 최종 상태를 유지하도록 하십시오.
CSS 애니메이션으로 페이드 인:
.item { display: none; } .item:hover { display: block; animation: fadeIn 0.5s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }CSS 전환을 시작하는 사람은 디스플레이 속성(block/none)을 동시에 수정하는 경우 작동하지 않는다는 것을 빠르게 발견할 것입니다. 아직 언급되지 않은 한 가지 해결 방법은 display:block/none 을 계속 사용하여 요소를 숨기거나 표시할 수 있지만, 요소의 불투명도를 0으로 설정하여 그것이 display:block 인 경우에도 여전히 보이지 않도록 하는 것입니다.
그런 다음 페이드 인하려면 불투명도를 1로 설정하고 불투명도에 대한 전환을 정의하는 "on"과 같은 다른 CSS 클래스를 추가합니다. 상상할 수 있는 것처럼 "on" 클래스를 요소에 추가하려면 JavaScript를 사용해야 하지만 적어도 실제 전환에는 여전히 CSS를 사용하고 있습니다.
display:block 과 "on" 클래스를 동시에 추가해야 하는 상황에 처한 경우 setTimeout을 사용하여 후자를 연기하십시오. 그렇지 않으면 브라우저는 두 가지를 동시에 발생하는 것으로 보고 전환을 비활성화합니다.
디스플레이를 사용하여 예상한 대로 자연스럽게 작동하도록 할 수 있지만 Javascript를 사용하거나 다른 사람들이 다른 태그 안에 하나의 태그로 멋진 트릭을 제안한 것처럼 작동하려면 브라우저를 조절해야 합니다. CSS와 치수를 더 복잡하게 하는 내부 태그는 신경 쓰지 않습니다. 그래서 자바스크립트 솔루션은 다음과 같습니다.
https://jsfiddle.net/b9chris/hweyecu4/17/
다음과 같은 상자로 시작합니다.
<div id="box" class="hidden">Lorem</div>숨겨진 상자입니다.
div.hidden { display: none; } #box { transition: opacity 1s; }관련 q/a에서 발견된 트릭을 사용하여 offsetHeight를 확인하여 브라우저를 즉시 조절합니다.
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() 은 전환을 끄고 display 를 none 에서 기본값인 block hidden 클래스를 제거합니다. 그런 다음 불투명도를 0으로 설정하여 페이드 인을 준비합니다. 이제 스테이지를 설정 .resumeTrnsn() 하여 전환을 다시 켭니다. 마지막으로 불투명도를 1로 설정하여 전환을 시작합니다.
라이브러리가 없었다면 표시 변경과 불투명도 변경 모두 바람직하지 않은 결과를 얻었을 것입니다. 단순히 라이브러리 호출을 제거하면 전환이 전혀 발생하지 않습니다.
위의 내용은 페이드아웃 애니메이션이 끝날 때 디스플레이를 다시 없음으로 설정하지 않습니다. 우리는 더 멋질 수 있습니다. 페이드 인되고 0에서 높이가 증가하는 것으로 그렇게 합시다.
https://jsfiddle.net/b9chris/hweyecu4/22/
#box { transition: height 1s, opacity 1s; } 이제 높이와 불투명도를 모두 전환하고 있습니다. 높이를 설정하지 않는다는 점에 유의하십시오. 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/animation 대기열에 참여할 수 있는 편리한 방법입니다. jQuery가 어떻게 작동하는지 설명하지는 않겠지만 .queue() 및 .stop() 배관은 애니메이션이 서로를 밟는 것을 방지하는 데 도움이 된다는 것만으로 충분합니다.
슬라이드 다운 효과를 애니메이션으로 만들어 보겠습니다.
$('#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'); }); } }); 이 코드는 #box 를 확인하고 해당 클래스를 확인하여 현재 숨겨져 있는지 여부를 확인하는 것으로 시작합니다. hidden wait() 라이브러리 호출을 사용하여 더 많은 것을 수행합니다. 이는 실제로 숨겨진 경우 찾을 수 있을 것으로 예상됩니다. 위의 간단한 예제에서는 할 수 없습니다. 이것은 또한 숨겨진 클래스가 복원되지 않았기 때문에 이전 예제의 버그였던 요소를 계속해서 표시/숨기기를 활성화합니다.
또한 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를 기다린 다음 추가된 클래스를 통해 전환을 시작하면 애니메이션 없이 화면에 깜박이는 대신 원하는 대로 나타나고 확장됩니다. 숨김을 적용하기 전에 애니메이션이 끝날 때까지 기다리는 것을 제외하고는 비슷한 상황이 다른 방향으로도 발생합니다.
참고: setTimeout 경쟁 조건을 피하기 위해 .animate(maxWidth) setTimeout 은 당신이나 다른 누군가가 코드를 알아채지 못할 때 숨겨진 버그를 빠르게 도입합니다. .animate() 쉽게로 사망 할 수 있습니다 .stop() . 나는 이것을 표준 fx 대기열에 50ms 또는 2000ms 지연을 두는 데 사용하고 있습니다. 여기에서 다른 코더가 이것 위에 구축하는 것을 쉽게 찾거나 해결할 수 있습니다.
모든 답변에 감사드립니다. 다음은 비슷한 목적으로 사용하는 것입니다. 전환 대 애니메이션입니다.
예: 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); }문제에 대한 가장 간단한 보편적인 해결책은 CSS에 display:none block (또는 다른 무엇이든)하도록 변경한 다음 요소에 클래스를 추가해야 합니다. 실제로 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 또는 이전 버전에서는 작동하지 않아야 합니다.
이 솔루션은 호환성이 뛰어나며 아직 본 적이 없습니다.
.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 트릭(한 단계에서 "표시 및 애니메이트"와 호환 가능)을 사용하지만 position: absolute; z-index: -1; pointer-events: none; 숨겨진 컨테이너가 공간을 차지 하지 않고 사용자 상호 작용에 응답 하지 않는지 확인합니다.
나는 대답을 찾을 수없는 비슷한 문제가있었습니다. 나중에 몇 가지 Google 검색이 나를 여기로 이끌었습니다. 내가 원하는 간단한 답을 찾지 못했기 때문에 우아하고 효과적인 솔루션을 발견했습니다.
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>SalmanPK가 가장 정답이라고 생각합니다. 다음 CSS 애니메이션을 사용하여 항목을 페이드 인 또는 페이드 아웃합니다. 그러나 display 속성은 부드럽게 움직이지 않고 불투명도만 움직입니다.
@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }디스플레이 블록에서 아무 것도 표시하지 않도록 이동하는 요소에 애니메이션을 적용하려는 경우 현재 CSS로만 가능한지 알 수 없습니다. 높이를 가져와 CSS 애니메이션을 사용하여 높이를 줄여야 합니다. 이것은 아래 예제와 같이 CSS로 가능하지만 요소에 애니메이션을 적용하는 데 필요한 정확한 높이 값을 아는 것은 까다로울 것입니다.
jsFiddle 예제
@-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";전환 이벤트로 이 작업을 수행할 수 있으므로 전환에 대해 두 개의 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>키프레임을 사용하지 않고 이 상황에서 전환을 적용하는 또 다른 방법은 요소 의 너비 를 0 으로 설정한 다음 호버에서 설정을 해제하는 것입니다.
.className{ visibility:hidden; opacity: 0; transition: .2s; width:0; } .className:hover{ visibility:visible; margin-right: .5rem; opacity: 1; width:unset; }jQuery를 사용하여 클래스를 설정하는 경우 100% 작동합니다.
$(document).ready(function() { $('button').click(function() { var container = $('.container'); if (!container.hasClass('active')) { container.addClass('show').outerWidth(); container.addClass('active'); } else { container.removeClass('active').one('transitionend', function() { container.removeClass('show'); }); } }); }); .container { display: none; opacity: 0; transition: opacity 0.3s ease; } .container.show { display: flex; } .container.active { opacity: 1; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button">Toggle</button> <div class="container"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 물론 jQuery .fadeIn() 및 .fadeOut() 함수를 사용할 수도 있지만 대신 클래스를 설정하는 이점은 block .fadeIn() 및 .fadeIn()의 기본값과 같이 .fadeOut() ).
여기에서는 멋진 페이드 효과로 flex 를 표시하도록 전환하고 있습니다.
출처 : http:www.stackoverflow.com/questions/3331353/transitions-on-the-css-display-property
| JavaScript에서 10진수를 16진수로 변환하는 방법 (0) | 2022.01.08 |
|---|---|
| C#이 foreach에서 변수를 재사용하는 이유가 있습니까? (0) | 2022.01.08 |
| 저장 프로시저의 결과를 임시 테이블에 삽입 (0) | 2022.01.08 |
| 인스턴스의 클래스 이름을 가져오시겠습니까? (0) | 2022.01.06 |
| 배열의 경우 a[5] == 5[a]인 이유는 무엇입니까? (0) | 2022.01.06 |