안녕하세요?
선생님 수업 너무 재밌게 잘 듣고 있어요.
숙제를 하다가 제가 배운 거 복습하고 싶어서
코드를 제 맘대로 막 짜봤는데요...
동작이 한번만 작동돼 고민하다가 질문드립니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Transition Animation</title>
<link rel="stylesheet" href="index.css" class="css" />
<script src="index.js" defer></script>
</head>
<body>
<div id="stripe">
<div id="slide">12345678910</div>
</div>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
#stripe {
border: 1px solid red;
width: 20px;
display: inline-block;
overflow: hidden;
cursor: pointer;
}
#slide {
display: flex;
justify-content: row;
}
#slide.animated {
transition: all 0.4s ease-in-out;
transform: translateX(-80px);
}
#slide.animatedReverse {
transition: all 0.4s ease-in-out;
transform: translateX(0px);
}
JS
let carousel = document.querySelector("#slide");
let count = 1;
carousel.addEventListener("click", function () {
// console.log("선택");
if (count % 2 === 1) {
carousel.classList.add("animated");
} else {
carousel.classList.add("animatedReverse");
}
count++;
});
반복하게 하고 싶어서
count++를 넣어봤는데
동작이 한번만 되고 벽돌이 됐어요..
왜 이지경이 됐는지 이유를 모르겠습니다.
도와주세요!!!!!
