애니매이션은 CSS로 처리하는것이 자바스크립트로 하는것 보다 성능적으로 좋음
one-way 애니매이션
1) 시작시 스타일 설정 (CSS)
- 안보이는상태 -> 보이는상태의 애니매이션을 원한다면
display : none; 대신 visibility : hidden; 으로 설정해야함.
2) 종료시 스타일 설정 (CSS)
display : block; 대신 visibility : visible; 으로 설정해야함.
3) 언제 종료 스타일로 변할지 코드 작성 (JS)
ex) 버튼누르면, 종료스타일 추가( .classList.add( '종료스타일' ) )
4) transition 추가 (CSS)
시작 스타일에 transition 속성 추가
ex) transition : all 1s;
'자바스크립트' 카테고리의 다른 글
| 소수점 숫자 연산시 주의사항 (0) | 2022.10.19 |
|---|---|
| 외부문서를 연결해주는 <link> (0) | 2022.10.07 |
| 소수 문제 (0) | 2022.09.23 |
| Math.random 랜덤숫자 활용하기 (0) | 2022.09.09 |
| event 설정 (0) | 2022.09.08 |