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

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 transition 在子组件中失效的解决
• vue组件 keep-alive 和 transition 使用详解
• Vue中的transition封装组件的实现方法
• vue 组件中使用 transition 和 transition-group实现过渡动画
• vue中transition组件在项目中运用小结

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！