Transition자바스크립트의 클릭 이벤트를 사용해서 클릭한 위치를 확인할 수 있다. window.addEventListener("click", function (e) { console.log(e.clientX, e.clientY);}); 클릭한 위치에 동그란 오브젝트를 이동시키는 애니메이션을 만들려면 어떻게 해야할까? 우선 동그란 오브젝트를 먼저 만들어주자면 다음과 같이 만들 수 있다.  너비와 높이가 30px인 붉은 공이다. 그리고 애니메이션이 발생했을 때 진행되는 속도는 1초로 설정해두었다. const ballElem = document.querySelector(".ball");window.addEventListener("click", function (e) { ball..

메뉴, 리스트 등을 여는 애니메이션을 구현하기 위해서 hight 값을 조작하는 경우가 많다. 하지만 height 값에 변화는 생기지만 transition이 적용되지 않는 경우가 발생했다. .menu { height: 0; overflow: hidden; transition: all 0.8s } .menu_active { heigth: auto } 이론상 menu 클래스만 가지고 있는 엘리먼트가 menu_active 클래스를 가지게 된다면 자식 엘리먼트의 height 값 만큼 커지면서 애니메이션이 발생되어야 한다. 하지만 display: none을 했을 때 애니메이션이 발생하지 않는 것처럼 아무런 애니메이션이 작동하지 않았다. 그 이유는 height 값이 auto라면 transition이 작동하지 않는다고..