点击按钮下滑显示组件

今天看着视频学习的时候遇到了，觉得以后会遇到，就记录下来了

需求：点击图片，显示遮挡层，同时下滑显示视频。点击”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-clo" @click="clovideo"></span>            <video              src="/imgs/product/video.mp4"                            muted              autoplay="autoplay"              controls="controls"            ></video>          </div>        </div>      </div>

.video-bg是显示在页面中的图片， .video是视频组件，.overlay是点击视频时，出现的遮挡层，如图

data部分：

1 show家电促销slide: ”

样式部分：主要用到了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-clo {                    // @include position(absolute, 20px, 20px, 20px, 20px);                    position: fixed;                    z-index: 11;                    top: 20px;                    ri理查德 杰弗森ght: 20px;                    width: 20px;                    height: 20px;                    background: url(/imgs/icon-clo.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 clovideo() {2             this.showslide = 'slideup'3             // 动画完成之后，在关闭showslide的样式4             ttimeout(() => {5                 this.showslide = ''6             }, 600)7         }

—-

第一次写，有点紧张哈哈