CSS

Question

我的情况只发生在IE11上。 Chrome，Firefox，Safari（平板电脑和手机）都按预期工作。我已经创建了一个面板（DIV）的过渡，它从侧面滑入/滑出。在页面加载时，它不应该“动画”，而是捕捉到适当的位置。但是在IE11页面加载时，只有当媒体查询涉及与选择器的最高CSS特异性级别相匹配的媒体查询时，才会“播放”转换。奇怪的是，媒体查询甚至不合适（在我的测试中加载页面时不应该应用）。

以下简单代码重复了我的问题：

CSS

.standard {
  transition: all 1s ease-in-out;
  transform: rotate(45deg);
  width:50px;  height:50px;  border:1px solid black;  background-color:green;   margin:3em;
}

button + .standard {
  transform: rotate(30deg);
}

button.on + .standard {
  transform:rotate(0deg);
}

/* REMOVE THE FOLLOWING COMMENTS to see issue on page load using IE11 - make sure window is larger than 800 pixels */
/*
@media only screen and (max-width:800px) {
  button.on + .standard {
    background-color:red;
    transform:rotate(270deg);
  }
}
*/

HTML

<button class="on" onclick="this.classList.toggle('on');">Rotate Test</button>
<div class="standard">&nbsp;</div>

因此，如果浏览器窗口的大小超过800像素，则不应应用媒体查询。然而，IE11似乎表现得像应用媒体查询然后恢复到实际触发转换的非媒体查询CSS。如果媒体查询内容选择器与媒体查询之外定义的最高CSS特异性级别不匹配，则在页面加载时不会观察到转换（换句话说，如果我的媒体查询CSS选择器不太具体[说button + .standard }]，你不会看到过渡“播放”。）

如何使用IE11阻止这种从页面加载“播放”过渡而不必编写javascript的想法？

Answer 1

使用MicroSoft支持并记录错误。这个问题有一个解决方法。

而不是使用媒体查询

@media only screen and (max-width:800px)

将查询更改为以下内容：

@media only screen and (min-width:1px) and (max-width:800px)

这不应该是必需的（应该暗示）但是在查询中放置min-width可以解决＆＃34; PLAYING＆＃34;页面加载过渡MS应该修复它，但由于有一个解决方法，快速投票的可能性很低。

Answer 2

不是完全免费的javascript解决方案，但您可以在body标签的整个页面中添加一个类：

body.pageload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

并在页面加载后删除该类

$("window").load(function() {
    $("body").removeClass("pageload");
});

Answer 3

当窗口大于定义的max-width时，user3546826的答案有效。当窗口小于过渡仍由IE / Edge动画时。通过以下解决方法（仅作为示例）可以避免这种情况：

#sidebar-wrapper {
  position: fixed;
  width: 240px;
  bottom:0;
  right:0;
  top:50px;
  overflow: hidden;
  -webkit-transition: left 0.4s ease-in-out;
  -moz-transition: left 0.4s ease-in-out;
  -o-transition: left 0.4s ease-in-out;
  transition: left 0.4s ease-in-out;
}
@media screen and (min-width: 768px) {
  #sidebar-wrapper {
    left: 0; /* define left here for IE / Edge */
  }
}
@media screen and (min-width: 1px) and (max-width: 767px) {
  #sidebar-wrapper {
    left: -240px;
  }
}

当存在未应用的媒体查询时，IE11会在页面加载时触发css转换

CSS

HTML

3 个答案: