Animation material & issue summary

JaeYeopHan / tip-archive

📦 Archiving various development tips. If you watch this repository, you can get issues related to the newly registered development tip from the GitHub feed.

https://www.facebook.com/Jbee.dev/

245 stars 8 forks source link

Animation material & issue summary #14

Open JaeYeopHan opened 6 years ago

JaeYeopHan commented 6 years ago

Materials

JaeYeopHan commented 6 years ago

자식 요소 애니매이션 발생시 animationend 이벤트 중복 발생

특정 요소에 animationend 이벤트는 자식 요소의 애니매이션에 의해서도 발생한다. 따라서 자식 애니매이션이 없는 최하위 요소에 이벤트를 등록하거나 e.element등으로 애니매이션이 발생하는 특정 엘리먼트만을 판단해야 한다.

JaeYeopHan commented 6 years ago

애니매이션 중단시 animationend 이벤트 미발생

class 추가로 css animation을 발생시키고 중간에 class를 제거하면 animationend 이벤트가 발생하지 않는다

JaeYeopHan commented 6 years ago

`gerBoundClientRect`

display: none 속성인 엘리먼트에 대해서는 gerBoundClientRect 가 동작하지 않는다.
해결책은 visibility 속성을 조절한다
- visible과 hidden으로
또다른 방법으로는 opacity를 조절하는 방법도 있다.
- 다만, opacity를 조절하는 경우, 실제로 사라지는 것이 아니기 때문에 클릭이 되는 경우가 발생한다.
- 이 경우를 방지하기 위해서는 point-event: none 속성을 고려해본다.