点击按钮下滑显示组件
2020-05-01 16:00:28来源:博客园 阅读 ()
点击按钮下滑显示组件
今天看着视频学习的时候遇到了,觉得以后会遇到,就记录下来了
需求:点击图片,显示遮挡层,同时下滑显示视频。点击"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; } }View Code
方法部分:
点击背景图,显示遮挡层和背景图。
点击关闭按钮,切换样式。
这了用到了定时器,因为如果不用定时器,视频直接消失,动画效果就消失了,所以用定时器让动画结束后再消失。样式里定义的动画时间为600ms.
1 closeVideo() { 2 this.showSlide = 'slideUp' 3 // 动画完成之后,在关闭showSlide的样式 4 setTimeout(() => { 5 this.showSlide = '' 6 }, 600) 7 }View Code
----
第一次写,有点紧张哈哈
原文链接:https://www.cnblogs.com/hahahakc/p/12788627.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- position: sticky实现导航栏下滑吸顶效果 2020-05-30
- 网页搜索框里显示字段鼠标点击后就隐藏的方法 2020-05-29
- html中点击a链接不跳转 2020-05-20
- Bootstrap4 按钮组+徽章(Badges)+进度条+分页+列表组 2020-04-16
- 取消a标签在移动端点击时的背景颜色 2020-03-19
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash