vanilla js로 페이드 인 효과를 애니메이션하고 싶지만 애니메이션 요소가 불투명도 1을 유지하지 않습니다. 매우 짧게 표시되지만 바로 사라집니다.
var carousel = document.getElementById('myCarousel');
window.onload = function() {
carousel.style.opacity = 0;
(function fadeIn() {
console.log('timer working');
(carousel.style.opacity += .1) > 1 ? carousel.style.opacity = 1 : setTimeout(fadeIn, 1000)
})();
}
시간 초과 기능이 작동하지만 요소가 1에 도달했을 때 불투명도 1을 유지하지 않는 이유를 알 수 없습니다.
carousel.style.opacity문자열이므로 어느 시점에서 구문 분석해야합니다. 가독성을 높이기 위해 조기 반환을 위해 복잡한 삼항 연산자를 사용하지 않을 것입니다.
window.onload = function() {
carousel.style.opacity = 0;
(function fadeIn() {
var opacity = parseFloat(carousel.style.opacity);
if (opacity == 1) return;
carousel.style.opacity = opacity + 0.1;
setTimeout(fadeIn, 1000);
})();
};
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다