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+iview实现文件上传
Nov 17 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vuex的使用步骤
Jan 06 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
详解vue中v-for的key唯一性
May 15 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
JavaScript 继承详解(一)
2009/07/13 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python装饰器用法实例总结
2018/05/26 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
python中id函数运行方式
2020/07/03 Python
PHP如何调用MYSQL存储过程
2014/05/30 面试题
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
如何唤起类中的一个方法
2013/11/29 面试题
最新教师自我评价分享
2013/11/12 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
2014年财政所工作总结
2014/11/22 职场文书
高中班主任评语
2014/12/30 职场文书
就业推荐表导师评语
2014/12/31 职场文书
办公室岗位职责
2015/02/04 职场文书
红旗渠导游词
2015/02/09 职场文书
学前教育见习总结
2015/06/23 职场文书
培训心得体会怎么写
2016/01/25 职场文书
《青山不老》教学反思
2016/02/22 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python