我的情况只发生在IE11上 . Chrome，Firefox，Safari（平板电脑和手机）都按预期工作 . 我已经创建了一个面板（DIV）的过渡，它从侧面滑入/滑出 . 在页面加载时，它不应该"animate"但是会卡入适当的位置 . 但是在IE11上，当页面加载时，转换是"played" ONLY，如果有一个媒体查询涉及该元素与选择器的最高CSS特异性相匹配 . 奇怪的是 media query is not even appropriate (should never be applied when the page is loaded in my test) .

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

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 ]，则不会看到过渡"played"） .

任何想法如何防止这种转换从页面加载“播放”使用IE11而不必编写javascript？

3 回答

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

而不是使用媒体查询
```
@media only screen and (max-width:800px)
```
将查询更改为以下内容：
```
@media only screen and (min-width:1px) and (max-width:800px)
```
这不应该是必需的（应该暗示）但是在查询中放置min-width解决了页面加载时转换的“PLAYING” . MS应该修复它，但由于有一个解决方法，快速投票率的可能性很低 .
回复于 2024-04-29T18:47:07+08:00

不是一个完全免费的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");
});

回复于 2024-04-29T18:47:07+08:00

当窗口大于定义的 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;
  }
}

回复于 2024-04-29T18:47:07+08:00

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

CSS

HTML

3 回答

相关问题