欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

点击按钮下滑显示组件

程序员文章站 2022-12-20 15:53:35
今天看着视频学习的时候遇到了,觉得以后会遇到,就记录下来了 需求:点击图片,显示遮挡层,同时下滑显示视频。点击"X",遮挡层消失,同时视频上滑隐藏。 具体代码: 通过v-show控制整个video-box盒子的显示与隐藏,可以提升性能。

6 ......

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

需求:点击图片,显示遮挡层,同时下滑显示视频。点击"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         }

 

----

第一次写,有点紧张哈哈