Transition 예제 (4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step02_example2.html</title>
<style>
.container{
width: 80%;
margin: 0 auto;
}
.wrapper{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
#one {
width: 300px;
height: 300px;
background-color: aqua;
transform: translateX(-300px);
transition: transform 0.4s ease-out;
}
</style>
</head>
<body>
<div class="container">
<h3>transform 예제</h3>
<button id="toggleBtn">토글</button>
<div class="wrapper">
<div id="one">one</div>
</div>
</div>
<script>
let count=0;
let isShow=false;
document.querySelector("#toggleBtn").addEventListener("click",()=>{
if(count==0) {
document.querySelector("#one").style.transform="translateX(0px)";
count=count+1
} else if (count==1) {
document.querySelector("#one").style.transform="translateX(-300px)";
count=0
}
})
</script>
</body>
</html>
토글 버튼을 누르면 count 값이 1 상승하며 id=one 인 div에 transform css가 추가되고
다시 토글 버튼을 누르면 count값이 0으로 바뀌고 id=one인 div에 translateX(-300px)의 css가 추가된다.
웹브라우저 실행)
'CSS' 카테고리의 다른 글
| Transition (6) (0) | 2023.07.12 |
|---|---|
| Transition (5) (0) | 2023.07.12 |
| Transition (3) (0) | 2023.07.11 |
| Transition (2) (0) | 2023.07.11 |
| Transition (1) (1) | 2023.07.11 |
