• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
成都路人甲萌 显示全部楼层 发表于 2021-10-25 20:20:48 |阅读模式 打印 上一主题 下一主题
transition文档地点
界说一个背景弹出层实现淡入淡出结果
  1. <template>
  2. <div>
  3.   <button @click="show = !show">
  4.    Toggle
  5.   </button>
  6.   <transition name="fadeBg">
  7.    <div class="bg" v-if="show">hello</div>
  8.   </transition>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13.   data: () => ({
  14.    show: true
  15.   }),
  16. };
  17. </script>
  18. <style lang="less" scoped>
  19. .fadeBg-enter-active,
  20. .fadeBg-leave-active {
  21.   transition: opacity 0.3s ease;
  22. }
  23. .fadeBg-enter,
  24. .fadeBg-leave-to {
  25.   opacity: 0;
  26. }
  27. .bg {
  28.   position: fixed;
  29.   top: 20px;
  30.   left: 0;
  31.   z-index: 105;
  32.   width: 100%;
  33.   height: 100%;
  34.   background: rgba(0, 0, 0, 0.5);
  35. }
  36. </style>
复制代码
到此这篇关于vue利用transition组件动画结果的实例代码的文章就介绍到这了,更多相干vue transition组件动画内容请搜刮草根技能分享从前的文章或继承浏览下面的相干文章盼望各人以后多多支持草根技能分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作