그누보드 QA - 모바일 화면 전체에 css 트랜지션(transition) 적용

모바일 화면 전체에 css 트랜지션(transition) 적용

Winter0 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2021.05.22 01:48:07 2437 (1.♡.♡.163)

답변 1

본문

안녕하세요!!
모바일 화면에서 사이드 메뉴 css를 시도하면서
transition: background-color .5s;
트랜지션을 넣었는데 이상하게 적용이 됩니다..

모바일 사이드 메뉴는 기능상 스킨쪽에 들어가고
트랜지션은 테마에 들어갑니다

이유는, 원하는 게 사이드 메뉴 펼쳐졌을 때 배경이 검게 변하는 건데,
테마 메뉴까지...화면 전체가 그렇게 됐으면 해서 테마쪽에 트랜지션을 넣었어요

트랜지션 넣은 위치는 테마 모바일 css입니다

hd
wrapper
container
그외 등등..여기서 배경이 검어지는 것까진 어찌어찌 적용이 되는데,
게시판 스킨의 입력칸들은 또 하얗네요...??;;;

어디에 트랜지션을 넣어야 화면 전체에 적용될까요...?

고수님들 부탁드립니다^^ㅠㅠ

html


    <div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
메뉴들어가는곳
</div>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()"> 메에뉴</span>
<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.body.style.backgroundColor = "white";
}
</script>

css


.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #ddd;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.sidenav a:hover {
  color: #f1f1f1;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

출처 www.w3schools.com