點擊按鈕下滑顯示組件

今天看著視頻學習的時候遇到了，覺得以後會遇到，就記錄下來了

需求：點擊圖片，顯示遮擋層，同時下滑顯示視頻。點擊"X"，遮擋層消失，同時視頻上滑隱藏。

具體代碼：

通過v-show控制整個video-box盒子的顯示與隱藏，可以提升性能。

<div class="item-video">
        <h2>
          60幀超慢動作攝影
          <br />慢慢回味每一瞬間的精彩
        </h2>
        <p>
          後置960幀電影般超慢動作視頻，將眨眼間的美妙展現得淋漓盡致！
          <br />更能AI 精準分析視頻內容，15個場景智能匹配背景音效。
        </p>
        <div class="video-bg" @click="showSlide = 'slideDown'"></div>
        <div class="video-box" v-show="showSlide">
          <div class="overlay"></div>
          <div class="video" :class="showSlide">
            <span class="icon-close" @click="closeVideo"></span>
            <video
              src="/imgs/product/video.mp4"
                            muted
              autoplay="autoplay"
              controls="controls"
            ></video>
          </div>
        </div>
      </div>

.video-bg是顯示在頁面中的圖片， .video是視頻組件，.overlay是點擊視頻時，出現的遮擋層，如圖

 data部分：

 1 showSlide: '' 

樣式部分：主要用到了animation動畫，slideDown和slideUp動畫

.video {
                position: fixed;
                z-index: 11;
                top: -80%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 1000px;
                height: 536px;
                opacity: 0;
                &.slideDown {
                    animation: slideDown .6s linear;
                    top: 50%;
                    opacity: 1;
                }
                &.slideUp {
                    animation: slideUp .3s linear;
                    top: -80%;
                    opacity: 0;
                }
                .icon-close {
                    // @include position(absolute, 20px, 20px, 20px, 20px);
                    position: fixed;
                    z-index: 11;
                    top: 20px;
                    right: 20px;
                    width: 20px;
                    height: 20px;
                    background: url(/imgs/icon-close.png) no-repeat 50%;
                    cursor: pointer;
                }
                video {
                    width: 100%;
                }
            }
      @keyframes slideDown {
        from {
          top: -80%;
          opacity: 0;
        }
        to {
          top: 50%;
          opacity: 1;
        }
      }
      @keyframes slideUp {
        from {
          top: 50%;
          opacity: 1;
        }
        to {
          top: -80%;
          opacity: 0;
        }
      }

方法部分：

點擊背景圖，顯示遮擋層和背景圖。

點擊關閉按鈕，切換樣式。

這了用到了定時器，因為如果不用定時器，視頻直接消失，動畫效果就消失了，所以用定時器讓動畫結束後再消失。樣式里定義的動畫時間為600ms.

1 closeVideo() {
2             this.showSlide = 'slideUp'
3             // 動畫完成之後，在關閉showSlide的樣式
4             setTimeout(() => {
5                 this.showSlide = ''
6             }, 600)
7         }

----

第一次寫，有點緊張哈哈