728x90
반응형
a 상태에서 b 상태를 만드는 일방향 애니메이션
ex. alert창 띄울 때 점점 진해지게,
팝업이 위에서 아래로 올라오게 등등 일방향 애니메이션 만드는 방법!
1. 시작스타일 만든다.
스타일 옵션은 class로 주고, css 내에서 적용 가능하면 css 안에 추가하도록 한다.
display : none을 주면 애니메이션이 잘 동작하지 않아서
슷한 역할을 할 수 있는 visibility : hidden 을 사용하기로 함.
.black-bg {
(생략)
visibility : hidden;
opacity : 0;
}
2. 최종스타일 만든다.
=> 최종적으로 보여주고 싶은 스타일, 이것도 class로 스타일을 준다.
.show-modal {
visibility : visible;
opacity : 1;
}
3. 스크립트로 이벤트 주기
ex) 버튼 클릭할 때 -> onclick.. 등!
4. 시작스타일에 transition 추가
transition은 스타일이 변할 때 천천히 변경하라는 뜻..!
생각보다 매우 간단하다
근데 난 css를 못해서... 이것도 넘 신기함 ㅎ0ㅎ
재밌구나!
반응형
'JavaScript' 카테고리의 다른 글
[JavaScript] input, change 이벤트의 차이 (0) | 2022.12.18 |
---|---|
[JavaScript] jsp 폼 전송 막는 이벤트 (0) | 2022.12.18 |
[JavaScript] name이 여러 개인 경우 값 가져오기 (0) | 2022.09.14 |
[JavaScript] select option DB 값 가져와서 체크하기 (0) | 2022.09.14 |
[JavaScript] 동적으로 생성된 객체에 이벤트 걸기 (0) | 2022.09.13 |
댓글