有人遇到过 antd的css文件在webpack打包的时候报错吗

html-css08

有人遇到过 antd的css文件在webpack打包的时候报错吗,第1张

不能。HTML可能经过文本压缩及字符转换。CSS可能做过自动追加前缀,压缩,或者根本就是用预编译器写出来的。Javascript可能经过压缩,优化。另外,如果打包配置中未设置pathinfo为true的话,将不会包含源文件路径。就算多增加一个空格也和原始的不同了吧?不过,当webpack打包时,可以配置生成.map文件,使用此文件可以还原原文件。你需要问原作者索要。

记录的原因:项目中遇到一个问题,使用 antd 的 table 组件,在鼠标悬停到一行的时候显示或者隐藏按钮,如下:

鼠标进入一行显示设为默认按钮,移出隐藏按钮

开始我的做法是找到 table 组件的属性通过 setState 来改变 button 的 visibility 属性,虽然效果是达到了,但是 显示和隐藏有个时间的延迟 ,开始我以为是因为 setState 的异步机制,会在频繁的设置 state 的时候合并处理导致的,

后来实验之后发现并不是,于是我就不用 setState 的来设置显示和隐藏,直接给tr加上类名,通过 hover 来显示隐藏

这样实验之后发现同样的问题依然存在, 后来想到display跟visibility的区别:一个是占位一个不占位,于是改成display来做,果然达到效果,鼠标一进一出是立刻显示和隐藏的

仔细一想为什么会有这个不同呢,display跟visibility的区别不就是占位不占位么,为什么一个有动画一个没有动画呢,antd对button组件确实做了动画设置

接着我就去 mdn上 搜索关于 transition 动画到底对哪些 css 属性有效果呢,果不其然, display 是没有动画效果的,而 visibility 是有动画效果的

链接如下: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties

又学到一个点啊,由此记录一下:)

参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions# 哪些 CSS 属性可以动画