Internet Explorer 11 过渡 translateY 行为怪异

Question

我正在尝试将一个元素从上到下转换（0 到 100vh）。 Internet Explorer 11 在转换转换属性时正在做奇怪的事情。它在应该下降的时候上升，而不是考虑持续时间。

JSFIDDLE1

JSFIDDLE2

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 的分辨率，尽管在更高的分辨率下粒度要小得多。您需要根据预期的使用情况来调整它们。