Vue.js[transition을 사용하여 메뉴 표시줄 만들기]

9266 단어 Vue.js

입문


3개월 가까이 만져보면 Vue.나는 js에 익숙해지기 시작했다.진전이 여전히 매우 느리다
그래서 예전부터 만들고 싶었던 메뉴판을 만들고 싶어요.

행위



완성 코드


html 파일로 복사하면 움직일 수 있으니 꼭 한번 해보세요.
index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>MENU BAR</title>
  </head>
  <body>
    <div id="app">
      <nav class="entireMenuBar">
              <ul>
                <div class="parentMenuBar1">
                  <li @click="{menuToggle1 = !menuToggle1,menuToggle2 = false}">親要素1</li>
                    <transition>
                      <div class="childMenuBar2" v-show="menuToggle1">
                        <ul>
                          <li>子要素1-1</li>
                          <li>子要素1-2</li>
                          <li>子要素1-3</li>
                        </ul>
                      </div>
                    </transition>
                </div>
              </ul>
              <ul>
                <div class="parentMenuBar2">
                  <li @click="{menuToggle2 = !menuToggle2,menuToggle1 = false}">親要素2</li>
                    <transition>
                      <div class="childMenuBar2" v-show="menuToggle2">
                        <ul>
                          <li>子要素2-1</li>
                          <li>子要素2-2</li>
                          <li>子要素2-3</li>
                        </ul>
                      </div>
                    </transition>
                </div>
              </ul>
      </nav>
      <div id="main" @click="{menuToggle2 = false ,menuToggle1 = false}">


      <br><br><br><br><br><br>
      <pre>{{ $data }}</pre>

    </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        data:{
          menuToggle1:false,
          menuToggle2:false,
        }
      }).$mount('#app')
    </script>

  </body>
  <style media="screen">
    .childMenuBar1,.childMenuBar2{
      position:relative;
      margin-top:6px;
      border-radius:2px;
      background-color:lightblue;
      z-index:-1;
    }
    body{
      margin:0;
      padding:0;
      background-color:lightgray;
    }
    ul{
      list-style:none;
      padding:0;
      margin:0;
    }
    li{
      margin:0;
      cursor:pointer;
    }
    .entireMenuBar{
      background-color: #eee;
      padding:5px;
      display:flex;
      height:30px;
    }
    .parentMenuBar1,.parentMenuBar2{
      width:80px;
      padding:5px;
      margin:0px 0px 0px 20px;
      border-radius:5px;
    }

    #main{
      height:100%;
    }
    .v-enter-active,.v-leave-active{
      transition: transform .2s ease-out;
    }

    .v-enter,.v-leave-to {
      transform: translateY(-90px);
    }
  </style>
</html>

관심 전환


다음 내용을 작성하여 CSS에서 애니메이션을 설정하는 것처럼 요소를 이동할 수 있습니다.
index.html

.v-enter-active,.v-leave-active{
      transition: transform .2s ease-out;
    }

    .v-enter,.v-leave-to {
      transform: translateY(-90px);
    }
.v-enter-active,.v-leave-active에서 동작의 종류와 소요 시간을 지정합니다..v-enter,.v-leave-to에서 동작을 시작할 때와 끝낼 때의 상태를 지정합니다.
운동의 흐름상
애니메이션 시작 시
1,v-enter
2,v-enter-active
애니메이션이 끝날 때
3,v-leave-active
4,v-leave-to
이런 절차.
그리고 저는 이 동작의 요소를<transition>動きをつけたい要素</transition>이렇게 과도라벨로 둘러싸면...
애니메이션 같은 동작의 요소를 완성했다.
참조:vue.js 참조 변환
여기서 마치겠습니다.끝까지 읽어주셔서 감사합니다.
페이지 원본 가져오기 (페이지 인코딩 형식 자동으로 가져오기)
데이터 처리 데이터의 가져오기와 내보내기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage