点击按钮下滑显示组件
程序员文章站
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 }
----
第一次写,有点紧张哈哈
上一篇: 香港星光大道怎么去 星光大道开放时间