仅在 IE10 Metro 模式下的奇怪转换行为

Question

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

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 Mode 和桌面模式之间的任何过渡差异，或者两者之间的任何其他可能有助于解释这种转变的差异？

代码无错误，控制台清晰。

谢谢！

Answer 1

如果你同时应用一个转换和一个转换，我已经看到 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);

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