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にアップロードされます.