21

所以我有一些原生元素（divs），它们应用了各种效果（border-radius和box-shadow）transform: scale()。当我为它们设置动画时，会发生两件奇怪的事情：

  1. 即使我没有尝试为比例设置动画，但如果我不将比例放入动画中，它也会被忽略。
  2. 当我将比例放入动画时，Webkit 会模糊元素

请参阅此处的示例：http: //jsfiddle.net/trolleymusic/RHeCL/ - 底部的按钮将触发问题。

第一个问题也发生在 Firefox 中，所以我猜这是因为动画规范应该是这样工作的。不是我想要的，但好吧，我会忍受的。

第二个问题很奇怪。我知道这与3d 变换有关，因为如果我（仅出于测试目的）声明-webkit-perspective或-webkit-transform-style: preserve-3d;在圆形元素上，它也会导致模糊问题。我的困惑是我并没有尝试转换 z 索引，而且我也尝试过使用纯粹translateY而不是translate.

它发生在 Chrome (18)、Chrome Canary (20) 和 Safari (5.1.2 & 5.1.4) 中。

那么，我认为正在发生的事情是对的吗？我怎样才能避免模糊？

最坏的情况：我可以为元素使用不同的大小而不是缩放它们，这不是一个真正的问题 - 但我认为这将是一个更优雅的解决方案，现在这个问题已经出现了。

4

2 回答 2

18

请参阅此答案，了解为什么它会模糊元素：https ://stackoverflow.com/a/4847445/814647

以上总结： WebKit 在动画之前采用原始尺寸/CSS，并将其视为图像，然后将其放大，产生模糊。

解决方案：使初始大小成为您要达到的最大比例，并以较低的比例开始（因此在您的情况下，您希望将大小增加 5，并将初始比例设置为 0.2）

更新

据我了解，它忽略当前比例的原因是因为您没有专门设置只是翻译（我现在正在查找它的 CSS）。当你运行时-webkit-animation，它会重置你当前的所有变换（比例），所以你需要确保你有你的比例。我正在查找要更改的 css，因此它只会更改位置：

于 2012-05-02T16:35:15.060 回答
0

我发现最好的方法是等待动画完成，然后将变换直接应用于元素并删除动画类。像这样的东西对我有用，不会产生任何故障：

$m.bindOnce($m('win-text'), 'webkitAnimationEnd', function(){ //avoid blurred problem with animating scale property in webkit
    $m('win-text').style.webkitTransform = 'scale(1.5) translateY(-60px)';
    $m.removeClass($m('win-text'), 'final');
});

我使用的库与 jQuery 不同，但你明白了。

于 2013-07-07T16:40:38.720 回答