디스플레이를 사용하여 자연스럽게 예상대로 작동하도록 할 수 있지만 Javascript를 사용하거나 다른 태그가 다른 태그를 사용하여 멋진 트릭을 제안한 것처럼 브라우저를 작동시켜 브라우저가 작동하도록해야합니다. 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에서 찾은 트릭을 사용하여 브라우저를 즉시 조절하기 위해 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()전환 오프 회전은, 우리는 제거 hidden뒤집 클래스 display에서 none, 기본에를 block. 그런 다음 불투명도를 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() 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');
});
}
});
이 코드는 #box클래스를 확인하여 확인하고 현재 숨겨져 있는지 여부로 시작 합니다. 그러나 슬라이드 아웃 / 페이드 애니메이션의 끝에 클래스를 wait()추가 하여 라이브러리 호출을 사용하여 더 많은 것을 달성 hidden합니다. 실제로 숨겨진 지 알 수 있습니다. 위의 간단한 예제로는 할 수 없었습니다. 이것은 숨겨진 요소가 결코 복원되지 않았기 때문에 이전 예제의 버그 인 요소를 반복하여 표시 / 숨기기를 가능하게합니다.
또한 호출하기 전에 사용자에게 표시하지 않고 .noTrnsn()최종 높이를 측정하는 것과 같은 측정 수행을 포함하여 일반적으로 애니메이션의 스테이지를 설정하기 위해 CSS 및 클래스 변경이 호출되는 것을 볼 수 있습니다.#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 대기열에 50ms 또는 2000ms 지연을두기 위해이를 사용하여 다른 코더가 쉽게 찾을 수 있습니다.