💻 Transition
웹개발시 정적 사이트보다 (어느 정도) 동적인 사이트가 더 이뻐보이고 인기많을것이다. 이 포스트에서는 박스요소를 옮기기위한 transition에대해 알아보자.
출처: 인프런-1분코딩
🖤 Box 이동효과주기
-
초기
-
transition 적용 후
박스를 클릭하면 오른쪽으로 날라가면서 색이 변한다.
✨ 코드
01.html
<style>
.box {
width: 100px;
height: 100px;
background-color: aqua;
transition: transform 1s cubic-bezier(0.38, -0.57, 0.63, 1.54);
}
/* .box:hover {
transform: scale(2);
} */
.box-action {
transform: translateX(250px);
background-color: aquamarine;
}
</style>
<body>
<div class="box"></div>
</body>먼저 자바스크립트요소를 뺀 코드부터 보자.
-transform : css transform속성으로 요소에 회전, 크기조절, 기울기, 이동 효과를 부여할수있다. 변형 가능한 요소만 transform할수있다. 즉, css박스모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있다.
-
translate() : 기본적으로 X축과 Y축에 따라 지정된 거리만큼 요소를 이동시킬 때 사용한다.
-
cubic-bezier() : 해당 function은 CSS에서 transition속성 혹은 transition-timing-function 속성에서 전환 시작과 끝까지의 효과를 제어하는데 쓰인다.
-
scale() : 요소의 크기를 변환시킨다. 2D에서만 확장되고 3D로 크기를 조정하려면 scale3d()을 사용해야한다.
-
rotate() : 요소를 변형시키지않고 2D 평면의 고정점을 기준으로 요소를 회전시키는 변환이다.
box에 초기 속성이 담긴 클래스와 클릭하여 transition이 적용된 속성이 담긴 box-action 클래스를 설명해보자면 이렇다.
box를 클릭했을때 box-action가 적용되야한다. 이를 위해서 자바스크립트도 넣어줘야한다.
01.html에 js
<script>
const box = document.querySelector(".box");
let isTransitionRunning = false;
box.addEventListener("click", () => {
if (!isTransitionRunning) {
box.classList.toggle("box-action");
}
}
</script>box를 클릭하면 이벤트가 추가될수있도록 코드를 짜봤다. box를 클릭하면 변수 isTransitionRunning값이 바뀌고 해당 변수값에따ㅑ라 박스를 클락하면 box-action가 추가되거나 삭제되는것이 클릭때마다 반복된다.
🖤 메시지도 전달하기
<body>
// 상태메시지추가를위해 바디에 p태그를 추가해준다.
<p class="message">상태 메시지: <span></span></p>
</body>
<script>
const box = document.querySelector(".box");
const message = document.querySelector(".message");
let isTransitionRunning = false;
box.addEventListener("click", () => {
if (!isTransitionRunning) {
box.classList.toggle("box-action");
}
isTransitionRunning = true;
// cancel 테스트
// setTimeout(() => {
// box.remove();
// }, 500);
// 다시
});
box.addEventListener("transitionstart", (e) => {
console.log(`${e.propertyName} START`);
message.innerText = "상태 메시지: " + "시작";
});
box.addEventListener("transitionend", (e) => {
console.log(`${e.propertyName} END`);
message.innerText = "상태 메시지: " + "끝";
isTransitionRunning = false;
});
box.addEventListener("transitionrun", (e) => {
console.log(`${e.propertyName} RUN`);
message.innerText = "상태 메시지: " + "진행중";
});
box.addEventListener("transitioncancel", (e) => {
console.log(`${e.propertyName} CANCEL`);
message.innerText = "상태 메시지: " + "취소";
});
</script>
이러면 이벤트발생마다 상태메시지로 시작과 끝을 알수있다
- 결과
시작
끝
처음에 박스를 클릭하고 이벤트가 적용될때 '시작'텍스트가 나오는 것을 볼수있고 이동된이후 '끝'이라는 텍스트가 적용된것을 알수있다. 그렇다면 콘솔을 확인해보자
- 콘솔
-
TransitionEvent: propertyName: TransitionEvent전환과 관련된 CSS 속성의 이름을 포함하는 문자열을 반환
-Transitionstart: CSS전환이 실제로 시작되었을 때, 즉 모든 전환이 transition-delay종료된 후에 시작된다.
-Transitionsrun: CSS전환이 처음 생성될 때, 즉 모든 전환이 transition-delay시작되기 전에 시작된다.
-Transitionend: CSS전환이 완료되면transitionend가 시작된다.
-Transitioncancel: CSS전환이 취소되면 이벤트가 시작된다.
-innerText: 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타낸다.
