Transition 예제 (3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step02_example.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="showBtn">보이기</button>
<button id="hideBtn">숨기기</button>
<div class="wrapper">
<div id="one">one</div>
</div>
</div>
<script>
document.querySelector("#showBtn").addEventListener("click",()=>{
document.querySelector("#one").style.transform="translateX(0px)";
})
document.querySelector("#hideBtn").addEventListener("click",()=>{
document.querySelector("#one").style.transform="translateX(-300px)";
})
</script>
</body>
</html>
보이기 버튼을 누르면 translateX 의 좌표가 0px으로 이동하고
숨기기 버튼을 누르면 translateX 의 좌표가 -300px 으로 이동하여 숨기는 효과를 낸다.
웹브라우저 실행)
'CSS' 카테고리의 다른 글
| Transition (5) (0) | 2023.07.12 |
|---|---|
| Transition (4) (0) | 2023.07.12 |
| Transition (2) (0) | 2023.07.11 |
| Transition (1) (1) | 2023.07.11 |
| Bootstrap Popover 디자인 및 동작 (0) | 2023.06.14 |
