internet-explorer - IE10/Win 7 在媒体查询中忽略 CSS 关键帧？

Question

0我正在为具有响应式布局的 Web 应用程序制作一些 CSS 动画。我的一些动画调整了一些容器的宽度和背景图像的位置。结果我有这样的东西（为简洁起见省略了前缀）：

/* Default styles */

.box { animation: grow 1s ease; }

keyframes grow {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}

/* Large display styles */

@media (min-width: 1200px){

   keyframes grow {
       0% {
          width: 200px;
       }
       100% {
           width: 300px;
       }
   }

}

根据这篇关于CSS Tricks的帖子，Win7 上的 IE10 会忽略媒体查询中的关键帧。我已经测试了这个理论，发现它是正确的。

有人找到解决方法吗？

Answer 1

像下面这样重新组织代码怎么样？

.box { animation: grow 1s ease; }

@keyframes grow {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}

@keyframes growLarge {
    0% {
        width: 200px;
    }
    100% {
        width: 300px;
    }
}

/* Large display styles */

@media (min-width: 1200px){

   .box { animation: growLarge 1s ease; }

}

Answer 2

我会为此使用Javascript。这是一些伪代码，不确定它在IE中是否有效：

if (screen.width > 1200) {

   // Large display styles

  var grow = 'keyframes grow { 0% { width: 100px; } 100% { width: 200px; } }',
      head = document.getElementsByTagName('head')[0],
      style = document.createElement('style');

    style.type = 'text/css';
    style.appendChild(document.createTextNode(grow));

}

因此，在 Javascript 中检测大于 1200 的屏幕尺寸并添加新样式。此外，如果您知道关键帧会增长样式表索引和规则索引，则可以通过 CSSOM 对其进行修改。

Answer 3

在媒体查询之外使用会.box { transition: all 1s ease }起作用吗？然后只需使用媒体查询更改宽度