[모달창 만들기😁]
- 모달창은 보통
<body>태그 안 제일 상단에 작성하는게 좋다고 함 - (css 참고) 아래 CSS 코드로 작성한다면 보통 페이지 맨 앞에 위치됨.
position : fixed;z-index : 5;
(실습) Class 탈부착식! (확장성을 위해)
- 기존 코드에서 아래의 코드 추가
- 이제 show-modal 원할 때 부착하면 모달창이 보이게!
.black-bg {
(생략)
display : none;
}
.show-modal {
display : block;
}//로그인을 클릭했을 때
document.getElementById('login').addEventListener('click', function () {
document.getElementsByClassName('black-bg')[0].classList.add('show-modal');
})
//제이쿼리용
// $('#login').on('click', function () {
// $('.black-bg').addClass('show-modal');
// })
//로그인모달창-닫기 클릭했을 때
document.getElementById('close').addEventListener('click', function () {
document.getElementsByClassName('black-bg')[0].classList.remove('show-modal');
})
//제이쿼리용
// $('#close').on('click', function () {
// $('.black-bg').removeClass('show-modal');
// })거듭주의!!!!!$() 이걸로 찾은 것들은 jquery 함수만 써야하고,
queryselector로 찾은 것들은 자바스크립트 함수만 써야 한다!!
[UI 애니메이션 만들기]
- 제이쿼리로 짜면 편리한다
그러나 이런 방법은 자바스크립트에 과부하를 줄 수 있어서
가능하면 CSS만으로 처리하는 것이 좋은 관습!🎶
[ one-way 일방향 애니메이션을 자바스크립트 코드로 만드는 법칙! ]
ex) 투명도가 1->2 글자크기가 15px -> 30px로
- 시작스타일 만들고 (class로)
- 최종스타일 만들고 (class로)
- 원할 때 최종스타일로 변하라는 JS 코드 작성
- 시작스타일에 transition 추가✨✨✨
A 상태에서 B 상태로만 움직이는 one-way 애니메이션은 위 방법으로 하면 된다!
(실습) fade in 애니메이션제이쿼리로는 아래처럼 간단히 작성 가능
$('#login').on('click', function () {
$('.black-bg').addClass('show-modal');
})자바스크립트로는 ↓↓↓↓↓↓- 시작스타일 만들기
.black-bg {
(생략)
visibility : hidden;
opacity : 0;
}opacity: 0~1display는 아예 html에서 삭제visibility는 모습만 삭제하는 느낌. 주로 애니메이션을 활용할때는display: none;보다visibility : hidden을 많이 사용한다. 그게 더 자연스러움! 이와 반대로display: block;아니고visibility: visible;
- 최종 스타일 만들기
.show-modal {
visibility : visible;
opacity : 1;
}- 최종스타일로 변하라고 JS코드 작성(위 JS코드!)
- transition 추가
.black-bg {
(생략)
visibility : hidden;
opacity : 0;
transition : all 1s;
}transition : all 1s;: 1초에 걸쳐 서서히 변경
(숙제 위에서 내려오는 애니메이션)
(슬라이드업 슬라이드다운) - height 속성 건들면 됌 하이트 오버플로우 히든조절해야함
*이건 자바스크립트보다는 css 실력에 달린 것이라 css 잘 모르면 못하는게 당연하다고함...! ㅜ ㅅ ㅜ
(+) 위에서 아래로 촤라락 내려오는 애니메이션
.list-group{ visibility: visible; overflow: hidden; height: 0px; } .show{ visibility: visible; height: 270px; transition: all 3s; }
정리하는게 공부가 될 지 모르겠지만, 정리를 하면 마음만큼은 편해