所以我有一些应用了不同效果(例如:border-radius、box-shadow 和 transform: scale())的本地元素(如 div)。 当我对它们进行动画处理时,出现了两个问题:
第一个问题在 Firefox 中也会发生,所以我猜这是动画规范要求的方式。虽然不是我想要的,但好吧,我可以接受。
第二个问题很奇怪。我知道这与 3D 转换有关,因为如果我(仅供测试目的)在圆形元素上声明 -webkit-perspective 或 -webkit-transform-style:preserve-3d;,它也会导致模糊问题。我的困惑在于,我并没有尝试转换 z-index,并且我还尝试过使用纯 translateY 替换 translate 进行动画。
它在 Chrome(18)、Chrome Canary(20)和 Safari(5.1.2 和 5.1.4)中都发生。
所以,我对正在发生的事情有正确的理解吗?我如何避免模糊?最坏的情况是:我可以使用不同尺寸的元素而不是缩放它们,这并不是问题 - 但我认为这是一种更优雅的解决方案,现在出现了这个问题。
- 即使我没有尝试动画缩放,如果我不在动画中放置缩放,则会被忽略。
- 当我将缩放放入动画中时,Webkit 会使元素模糊。
第一个问题在 Firefox 中也会发生,所以我猜这是动画规范要求的方式。虽然不是我想要的,但好吧,我可以接受。
第二个问题很奇怪。我知道这与 3D 转换有关,因为如果我(仅供测试目的)在圆形元素上声明 -webkit-perspective 或 -webkit-transform-style:preserve-3d;,它也会导致模糊问题。我的困惑在于,我并没有尝试转换 z-index,并且我还尝试过使用纯 translateY 替换 translate 进行动画。
它在 Chrome(18)、Chrome Canary(20)和 Safari(5.1.2 和 5.1.4)中都发生。
所以,我对正在发生的事情有正确的理解吗?我如何避免模糊?最坏的情况是:我可以使用不同尺寸的元素而不是缩放它们,这并不是问题 - 但我认为这是一种更优雅的解决方案,现在出现了这个问题。
transform
属性的工作方式,很遗憾你不能单独设置不同的属性。例如:我可以动画地改变具有不同属性的多个元素的不透明度,这些元素具有不同的类。 - Trolleymusic