变换 + 过渡导致内容跳跃或模糊 CSS

Posted 2023-03-06

【中文标题】变换 + 过渡导致内容跳跃或模糊 CSS

【英文标题】：transform + transition causes jump or blurry content CSS

【发布时间】：2016-10-01 01:00:48

【问题描述】：

让我们从小提琴开始：http://jsfiddle.net/r1kw37g5/

.grid-item .diamond .inner-diamond
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 394px;
  height: 394px;
  position: relative;
  top: -23%;
  left: -23%;

情况是我创建了一个菱形网格。 该网格中的元素旋转 -45 度，内部的容器旋转 45 度以使内容再次变直。 （内容出现在悬停时）

在该容器内是一个带有简单动画的按钮，这就是问题的开始。当您将鼠标悬停在按钮上时，其他内容会变得模糊一段时间，直到动画结束并向右跳 1px。

我试过：在容器上放一个 translateZ(0) 来阻止它跳转。这可行，但会使内容不断模糊。我尝试使用缩放和缩放组合 preserve3d 和字体平滑来对抗模糊的内容，但到目前为止还没有运气。

问题是，有没有人知道一种方法可以让按钮在不跳转且其他内容不模糊的情况下为按钮设置动画？

【问题讨论】：

您是否检查过在使用 devtools 制作动画期间文本的不透明度/颜色是否发生了变化？因为看起来文本的默认颜色与动画期间的颜色不同。

【参考方案1】：

动画好像有问题(CSS transition effect makes image blurry / moves image 1px, in Chrome?)

我会让文本在transform的元素之外。

将您的.button 放入.diamond 将.inner-diamond 移动为.diamond 的兄弟，给它一个opacity: 0（删除.diamond-content 的opacity:0） 将pointer-events:none 设置为.inner-diamond

使用兄弟方法来实现它

.diamond:hover + .inner-diamond 
  opacity: 1

一个快速演示（布局不漂亮）： http://jsfiddle.net/r1kw37g5/6/

【讨论】：

这个解决方法确实给我的特定构建带来了新问题，但答案确实很好地解释了这个问题并提供了一个实际的解决方法，所以 kudo 对此表示赞同