airyland / vux

Mobile UI Components based on Vue & WeUI
https://vux.li
MIT License
17.59k stars 3.71k forks source link

[Bug Report] 上传后 XDialog 的mask遮罩层的渐变效果失效 #2894

Closed Excalibur0w0 closed 3 years ago

Excalibur0w0 commented 6 years ago

VUX version

2.9.2

OS/Browsers version

Chrome-64.0.3282.119

Vue version

2.5.16

Code

<template>
  <div>
      <x-dialog v-model="showHideOnBlur" class="dialog-demo" hide-on-blur>
        <div class="img-box">
          <img src="https://ws1.sinaimg.cn/large/663d3650gy1fq6824ur1dj20ia0pydlm.jpg" style="max-width:100%">
        </div>
        <div @click="showHideOnBlur=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
      <div @click="change">click me</div>
  </div>
</template>

<script>
import { XDialog, Group, TransferDomDirective as TransferDom } from 'vux'

  export default {
    data () {
      return {
        showHideOnBlur: false
      }
    },
    methods: {
      change () {
        this.showHideOnBlur = true
      }
    },
    components: {
      XDialog,
      TransferDom,
      Group
    }
  }
</script>

<style>
</style>

Steps to reproduce

本地调试正常,上传至ubuntu服务器后, 本地Chrome浏览时,mask渐变效果失效,mask直接瞬间显示

What is Expected?

mask 渐变过渡动画存在

What is actually happening?

mask 直接瞬间显示

dongj0316 commented 6 years ago

这个组件接收一个maskTransition属性,默认值是'vux-mask',源码文件transition.less中似乎去掉'vux-mask'了,要手动指定maskTransition的值为'vux-fade'

ahjsrhj commented 5 years ago

@dongj0316 nice! 这框架坑太多了😢