[JavaScript] 자바스크립트 요소 이동하기

178_자바스크립트 요소 이동하기

[적용]

• 요소의 이동 모션으로 주의를 환기하고 싶을 때

---

[내용]

좌표의 변경은 CSS transform 속성에 translate() 메소드를 사용한다.

translate()를 사용해 요소의 수직과 수평 이동이 가능하다.

CSS transitions와 Web Animations API의 예시를 확인해 보자.

 

CSS Transitions를 사용한 샘플

CSS (부분)                                                                                                                                                           style.css

.rect {
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  background: white;
  top: 150px;
  
  transition: all 3s;
}

.rect.state-show {
  transform: translate(300px, 0px);
}

JavaScript (부분)                                                                                                                                               main.js

const element = document.querySelector('.rect');
if (element.classList.contains('state-show') === true) {
  element.classList.remove('state-show);
} else {
  element.classList.add('state-show');
}

 

Web Animations API를 사용한 샘플

JavaScript (부분)                                                                                                                                               main.js

 

const element = document.querySelector('.rect');
element.animate(
  {
    transform: [
      'translateX(0px)',  // 시작 값
      'translateX(300px)'  // 종료 값
    ]
  },
  {
    duration: 3000,  // 밀리초 지정
    fill: 'forwards',  // 종료 시 속성을 지님
    easing: 'ease'  // 가속도 종류
  }
};

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김