vux x-dialog弹窗动画无法固定某个模式，有时淡入淡出，有时是旋转，confirm存在同样问题

pgvzfuti 于 8个月前发布在其他

关注(0)|答案(3)|浏览(162)

No description provided.

vux

来源：https://github.com/airyland/vux/issues/3101

3条答案

按热度按时间

zour9fqk1#

请问你是不是使用了《如何在Vue项目中使用vw实现移动端适配》，我使用了这个出现了这个问题，然后一排查，是 .postcssrc.js 里的 cssnano 导致的！原因是因为 animation-name 被 cssnano 重写了

然后我这样子处理解决了：

.postcssrc.js

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750 / 2, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334 / 2, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    },
    "postcss-viewport-units": {
      // vw适配中使用伪类选择器遇到的问题 https://blog.csdn.net/perryliu6/article/details/80965734
      filterRule: rule => rule.selector.indexOf('::after') === -1 && rule.selector.indexOf('::before') === -1 && rule.selector.indexOf(':after') === -1 && rule.selector.indexOf(':before') === -1
    },
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false,
      // 解决了 animation-name 被重写的 bug  https://github.com/cssnano/cssnano/issues/247
      reduceIdents: false
    }
  }
}

展开查看全部

赞(0）回复(0）举报 8个月前

hs1rzwqc2#

然后我这样子处理解决了：

.postcssrc.js

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750 / 2, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334 / 2, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    },
    "postcss-viewport-units": {
      // vw适配中使用伪类选择器遇到的问题 https://blog.csdn.net/perryliu6/article/details/80965734
      filterRule: rule => rule.selector.indexOf('::after') === -1 && rule.selector.indexOf('::before') === -1 && rule.selector.indexOf(':after') === -1 && rule.selector.indexOf(':before') === -1
    },
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false,
      // 解决了 animation-name 被重写的 bug  https://github.com/cssnano/cssnano/issues/247
      reduceIdents: false
    }
  }
}