x 버튼으로 변경후에 위치 이동에서 자연스러운 애니메이션이 안돼... - 인프런

반응형 웹사이트 포트폴리오(App Official Landing Website)

x 버튼으로 변경후에 위치 이동에서 자연스러운 애니메이션이 안돼요 ㅠㅠ

작성

291

강의 너무 재미있고 잘듣구있습니다!

너무너무 알차요~!~!~!

근데 ㅠㅠ 다 되는데 이상하게 하나가.. 안따라지네요..

햄버거 바 버튼에서 x 버튼으로 자연스러운 이미지 변환은 가능한데요!

x버튼이 사이드바를 따라서 스르륵 이동하는게 안되네요 ..

ㅠㅠ.. 제가보기엔 소스코드가 같은거같은데

어디가 잘못된건지.. ㅠㅠ 이틀을 .. 계속 강의따라서 다시 코드 타이핑을 해봐도 같아서.. 질문드립니다 !

input[id=trigger]{
    display: none;
}

label[for=trigger]{
    border: 1px solid red;
    width: 30px;
    height: 20px;
    display: inline-block;
    position: absolute;
    transition: 0.3s;
    
}

label[for=trigger] span{
    display: block;
    height: 2px;
    width: 100%;
    background-color: black;
    position:absolute;
    left: 0;
    cursor: pointer;
    transition: 0.3s;
    z-index: 100;
}

label[for=trigger] span:nth-child(1){
    top: 0;
}
label[for=trigger] span:nth-child(2){
    top: 50%;
}
label[for=trigger] span:nth-child(3){
    top: 100%;
}

/* display: none; 이지만 label과 같은 이름이기때문에 체크가 된다. */
input[id=trigger]:checked + label span:nth-child(1){
 top: 50%;
 transform: rotate(45deg);
 
}
input[id=trigger]:checked + label span:nth-child(2){
    opacity: 0;
   }
input[id=trigger]:checked + label span:nth-child(3){
top: 50%;
transform: rotate(-45deg);

}


.sidebar{
    width: 250px;
    height: 100vh;
    background-color: pink;
    position: fixed;
    top:0;
    left: -250px;
    transition: 0.3s;
}


input[id=trigger]:checked ~ .sidebar{
    left: 0px;
}

input[id=trigger]:checked + label{
    left: 250px;
}

애니메이션 트렌지션 반응형 웹 트리거 jquery HTML/CSS

답변 2

코딩웍스(Coding Works)

지식공유자

강의에는 xeicon을 :before에 넣어서 변경했는데 인접선택자로 하셨네요.

css 보니까 HTML+CSS+JQUERY 포트폴리오 실전 퍼블리싱 강의에 있는 예제 같은데요...

그런데 html 코드도 주셔야 뭐가 문제인지 알 수 있어요.

html 코드 다시 첨부해주세요. 그리고 오류나는 결과화면 캡쳐도 첨부 해주세요.

서주

질문자

첨부합니다!

저기 x 버튼이 햄버거바 에서 이동할때 스르륵 같이 핑크 사이드바 랑 이동해야하는데

그게안되더라구요

분명히 트랜지션을 넣었는데 왜이럴까요?ㅠㅠ..

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css" class="stylesheet">
</head>
<body>
    
    <div class="container">
      <input type="checkbox" id="trigger">
      <label for="trigger">
        <span></span>
        <span></span>
        <span></span>

      </label>

      <div class="sidebar"></div>

       </div>

</body>
</html>

인프런 커뮤니티 질문&답변

x 버튼으로 변경후에 위치 이동에서 자연스러운 애니메이션이 안돼요 ㅠㅠ