210910
🎊学習の内容
JavaScript/* css animation, js에는 .show 추가 했다가 setTimeout 으로 3.5초 후에 제거 */
#snackbar.show {
visibility: visible;
animation: fadeIn 0.5s, fadeOut 0.5s 2.5s forwards;
}
// 초기 max-height 0 으로 설정하고, max-height 있으면 null, 없으면 max-height에 scrollHeight 추가
var panel = this.nextElementSibling;
if(panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
// currentSlide에 show가 없으면 첫번째 Slide에 show추가, 있으면 show를 제거하고 다음 silde를 nextslide로 정함. 마지막 slide가 없으면 다시 첫번째 slide에 show 추가. setInterval 무한 반복
var firstSlide = document.querySelector('.item:first-child')
function slide() {
var currentSlide = document.querySelector('.show');
if (currentSlide) {
currentSlide.classList.remove('show');
var nextSlide = currentSlide.nextElementSibling
if(nextSlide) {
nextSlide.classList.add('show');
} else {
firstSlide.classList.add('show');
}
} else {
firstSlide.classList.add('show');
}
}
次の内容はgithubにアップロードされます.
Reference
この問題について(210910), 我々は、より多くの情報をここで見つけました
https://velog.io/@cptdye77/210910
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
/* css animation, js에는 .show 추가 했다가 setTimeout 으로 3.5초 후에 제거 */
#snackbar.show {
visibility: visible;
animation: fadeIn 0.5s, fadeOut 0.5s 2.5s forwards;
}
// 초기 max-height 0 으로 설정하고, max-height 있으면 null, 없으면 max-height에 scrollHeight 추가
var panel = this.nextElementSibling;
if(panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
// currentSlide에 show가 없으면 첫번째 Slide에 show추가, 있으면 show를 제거하고 다음 silde를 nextslide로 정함. 마지막 slide가 없으면 다시 첫번째 slide에 show 추가. setInterval 무한 반복
var firstSlide = document.querySelector('.item:first-child')
function slide() {
var currentSlide = document.querySelector('.show');
if (currentSlide) {
currentSlide.classList.remove('show');
var nextSlide = currentSlide.nextElementSibling
if(nextSlide) {
nextSlide.classList.add('show');
} else {
firstSlide.classList.add('show');
}
} else {
firstSlide.classList.add('show');
}
}
Reference
この問題について(210910), 我々は、より多くの情報をここで見つけました https://velog.io/@cptdye77/210910テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol