当前位置:   article > 正文

transition transform属性造成文字抖动及模糊的解决方法_css transition transform 导致文字上下浮动

css transition transform 导致文字上下浮动

在动画的transform里加上translateZ(0)值, 能解决文字抖动的问题,但是没能解决文字模糊的问题。
在使用transition transform发生文字模糊的地方加上transform: translate3d(0,0,0),解决文字模糊以及的问题。

  1. <van-icon name="arrow-down"
  2. color="#9599d4"
  3. style="transition: transform 0.3s; transform: translate3d(0, 0, 0)"
  4. :class="setIconStyle(true)" />
  1. //动态设置角色列表的图标样式
  2. setIconStyle() {
  3. return function(val) {
  4. return val ? 'negative-rotate': 'positive-rotate'
  5. }
  6. },
  1. .positive-rotate {
  2. transform: rotate(0deg) translateZ(0)
  3. }
  4. .negative-rotate {
  5. transform: rotate(-180deg) translateZ(0)
  6. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/代码艺术创作者/article/detail/60239
推荐阅读
  

闽ICP备14008679号