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-30px的转变。我只是好奇是否有其他人在城域模式和桌面模式之间的IE10中遇到任何转换差异，或者2之间的任何其他差异可能有助于解释这种转变？

代码中没有错误，控制台很清楚。

谢谢！

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);

这段代码很可怕，当然，它只是让你发现问题所在。

仅IE10城域模式中的奇怪转换行为

1 个答案: