CSS-transition简单过渡动画

实现视频弹窗从上到下滑入:

.video { transition: all .8s; &.slide { top:50%; opacity: 1; } position: fixed; top: -50%; left: 50%; transform: translate(-50%,-50%); z-index: 10; width: 1000px; height: 536px; opacity: 0;}

 

 <div class="video-bg" @click="showSlide=true"></div> <div class="video-box" > <div class="overlay" v-if="showSlide"></div> <div class="video" :class="{‘slide‘:showSlide}"> // video只是在上方看不见的地方,并不是隐藏了 <span class="icon-close" @click="showSlide=false"></span> <video src="/imgs/product/video.mp4" muted autoplay controls="controls"></video> </div> </div> </div>

 

相关文章