transition文档地址
定义一个背景弹出层实现淡入淡出效果
<template> <div> <button @click="show = !show"> Toggle </button> <transition name="fadeBg"> <div class="bg" v-if="show">hello</div> </transition> </div> </template> <script> export default { data: () => ({ show: true }), }; </script> <style lang="less" scoped> .fadeBg-enter-active, .fadeBg-leave-active { transition: opacity 0.3s ease; } .fadeBg-enter, .fadeBg-leave-to { opacity: 0; } .bg { position: fixed; top: 20px; left: 0; z-index: 105; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } </style>
到此这篇关于vue使用transition组件动画效果的实例代码的文章就介绍到这了,更多相关vue transition组件动画内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术!
本文转载自微信公众号「三太子敖丙」,作者三太子敖丙。转载本文请联系三太子敖...
前言 静态文件(如 HTML、CSS、图像和 JavaScript)等是Web程序的重要组成部分。...
端点路由(Endpoint Routing)最早出现在ASP.NET Core2.2,在ASP.NET Core3.0提升...
目录中出现 jsconfig.json 文件表明该目录是 JavaScript 项目的根目录。 Json 文...
博主最近在做一个个人的博客网站,准备用 thymeleaf 实现一个动态加载一二级文章...
详解JSP中使用过滤器进行内容编码的解决办法 问题 当通过JSP页面,向数据库中插...
为什么我们需要它 不得不说,在知道这个命令的时,以及之后的使用中,我都超级热...
MySQL的binlog相信大家都有所耳闻,但是可能没有真正日常使用过。 因此,本文结...
一、GIF图 二、前台代码 // 调用方法 hotlineLine(); // 定时刷新 setInterval(f...
通过ImageMagickObject的identify获取图片的信息,在命令行下好用,但是放到程序...