Question

我正在尝试从上到下转换元素，（0到100vh）。在转换转换属性时，Internet Explorer 11正在做一些奇怪的事情。当它应该下降并且不尊重持续时间时它会上升。

div{
    width:200px;
    height:200px;
    background:black;
    transition:transform 5s;
    -ms-transition: -ms-transform 5s;
}

div:hover{
    transform:translateY(100vh);
    -ms-transform:translateY(100vh);
}

为什么会发生这种情况，我该如何解决？

Answer 1

我知道这个问题已经过时了，但今天我遇到了同样的问题。我正在构建一种幻灯片，它使用CSS过渡来幻灯片进出幻灯片。大多数浏览器处理transform: translateX(-100vw)和transform: translateY(-100vh)分别向左和向上移动幻灯片，但是IE在计算正确的开始/结束位置时遇到困难，并且像@Alvaro提到的那样对时间感到困惑。

解决方案是使用绝对单位（例如像素）而不是相对单位。但是，鉴于我需要支持的屏幕尺寸范围很广，我不能使用单一值。

我的工作是使用一系列@media查询来定义一组翻译规则，这些规则将始终确保幻灯片在屏幕外移动，但不会太过分。例如：

/* Slide left */
@media (max-width: 480px) {
  .slide.left {
    transform: translateX(-480px);
  }
}
@media (min-width: 481px) and (max-width: 960px) {
  .slide.left {
    transform: translateX(-960px);
  }
}
@media (min-width: 961px) and (max-width: 1920px) {
  .slide.left {
    transform: translateX(-1920px);
  }
}
@media (min-width: 1921px) and (max-width: 3840px) {
  .slide.left {
    transform: translateX(-3840px);
  }
}
@media (min-width: 3841px) {
  .slide.left {
    transform: translateX(-7680px);
  }
}

/* Slide up */
@media (max-height: 480px) {
  .slide.up {
    transforom: translateX(-480px);
  }
}
/* Etc. */

这些查询将支持高达8K的分辨率，尽管在更高分辨率下的粒度要小得多。您需要根据预期的使用情况对其进行调整。

Internet Explorer 11过渡translateY表现奇怪

1 个答案: