0

我编写了以下内容来处理灯箱事件的动画：

obj.css({
 'transition':'transform 0.2s linear 0s',
 'transform':'perspective(1000px) rotateX(5deg) rotateY(0deg) rotate(10deg) skewX(0deg) skewY(0deg) translate(0px,0px) translateZ(0px)',
 'transform-style':'preserve-3d'
});

为了简单起见，我去掉了变量和供应商前缀。此代码在我测试过的所有设备上 100% 运行，并且流畅地执行动画。

但是，我在 IE10 中遇到了一个奇怪的问题。仅在 Metro 模式下（桌面模式 IE10 完美运行）时，动画会跳转……然后执行动画……然后在完成后再次跳转。跳跃很微妙，大概是 20-30 像素的偏移。我只是好奇是否有其他人在 IE10 中经历过 Metro 模式和桌面模式之间的任何过渡差异，或者两者之间的任何其他可能有助于解释这种转变的差异？

代码没有错误，控制台清晰。

谢谢！

4

1 回答 1

0

如果您同时应用转换和转换，我已经看到 IE10 会做一些奇怪的事情，调试您可以尝试...

obj.css({'transition':'transform 0.2s linear 0s'})

setTimeout(function(){
  obj.css({
   'transform':'perspective(1000px) rotateX(5deg) rotateY(0deg) rotate(10deg) skewX(0deg) skewY(0deg) translate(0px,0px) translateZ(0px)',
   'transform-style':'preserve-3d'
  });
}, 10);

如果这不起作用，您可以尝试从默认值开始...

obj.css({
 'transition':'transform 0.2s linear 0s',
 'transform':'perspective(1000px) rotateX(0) rotateY(0) rotate(0) skewX(0deg) skewY(0deg) translate(0px,0px) translateZ(0px)'
})

setTimeout(function(){
  obj.css({
   'transform':'perspective(1000px) rotateX(5deg) rotateY(0deg) rotate(10deg) skewX(0deg) skewY(0deg) translate(0px,0px) translateZ(0px)',
   'transform-style':'preserve-3d'
  });
}, 10);

这段代码很可怕，当然，它只是为了让你发现问题可能出在哪里。

于 2013-04-28T02:21:56.770 回答