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>