vue使用transition组件动画效果的实例代码


Posted in Vue.js onJanuary 28, 2021

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组件动画内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
详解vue 组件注册
Nov 20 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
Vue ​v-model相关知识总结
Jan 28 #Vue.js
Vue 数据响应式相关总结
Jan 28 #Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 #Vue.js
vscode自定义vue模板的实现
Jan 27 #Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 #Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 #Vue.js
vue实现轮播图帧率播放
Jan 26 #Vue.js
You might like
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
jquery中post方法用法实例
2014/10/21 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
python 中字典嵌套列表的方法
2018/07/03 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
汽车维修工岗位职责
2014/02/12 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python