当我尝试使用过渡来为变换 TranslateY() 制作动画时，我在 IE11 和 10 上遇到了一个奇怪的问题。我有一个天空盒，里面有一个天空，高度为 500vh。该天空必须根据视口中的当前部分上下移动。
视口是一个绝对：位置元素，用于处理内容等。
当我现在将天空设置为“transform:translateY(-400vh)”时，它在除 IE11 和 10 之外的每个浏览器中都能正常工作。看起来该元素在过渡开始时消失，在过渡完成时出现。
您可以在此处的小提琴中找到一个简短的示例：https://jsfiddle.net/90q394vz/4/ https://jsfiddle.net/90q394vz/4/
body, html {
height:100%;
width:100%;
overflow:hidden;
}
* { box-sizing:border-box; }
header {
position:fixed;
top:0;
left:0;
width:100%;
background:#fff;
z-index:100;
}
.skybox {
//height: 100%;
z-index: 1;
//width: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.skybox .sky {
height: 500vh;
width: 100%;
background: red;
transform: translateY(-400vh);
transition: all 0.8s ease-in-out;
}
.sec1 .skybox .sky {
transform: translateY(-400vh);
}
.sec2 .skybox .sky {
transform: translateY(-300vh);
}
.sec3 .skybox .sky {
transform: translateY(-200vh);
}
.sec4 .skybox .sky {
transform: translateY(-100vh);
}
.viewport {
width:100%;
height: 100%;
position: relative;
z-index:10;
text-align:center;
padding: 50px;
}
.viewport-content {
background: rgba(255,255,255,0.2);
margin: 100px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<span onclick="$('body').removeClass().addClass('sec1')">scroll 1</span>
<span onclick="$('body').removeClass().addClass('sec2')">scroll 2</span>
<span onclick="$('body').removeClass().addClass('sec3')">scroll 3</span>
<span onclick="$('body').removeClass().addClass('sec4')">scroll 4</span>
</header>
<div class="skybox">
<div class="sky">
<div style="height:100vh; padding:100px;">sky part 5</div>
<div style="height:100vh; padding:100px;">sky part 4</div>
<div style="height:100vh; padding:100px;">sky part 3</div>
<div style="height:100vh; padding:100px;">sky part 2</div>
<div style="height:100vh; padding:100px;">sky part 1</div>
</div>
</div>
<div class="viewport">
<div class="viewport-content">
im content in top of the sky yeahhh...ö
</div>
</div>
知道如何解决这个问题吗？
更新1：经过另一次测试后，我认为 IE 无法将 Transform 与 vh 和 vw 单位一起使用！下面是 10vh 的简单 translateX 的一个小示例。它朝相反的方向发展，哈哈。我完全不知道那里发生了什么-.-
https://jsfiddle.net/8hne5ckd/3/ https://jsfiddle.net/8hne5ckd/3/
UPDATE 2几个小时后，我发现，当我将变换从简单的 2d 变换 (translateY(-100vh)) 更改为 translate3d(0, -100vh, 0) 时，它似乎适用于 vh 和 vw 单位。我不知道为什么 IE 可以使用 3dtransforms 处理 vh 和 vw 单位，但不能处理 2dtransforms 中的 vh 和 vw 单位。
如果有更多知识的人可以向我解释原因，那就太好了。
https://jsfiddle.net/8hne5ckd/7/ https://jsfiddle.net/8hne5ckd/7/
UPDATE 3好吧，它仍然不起作用。带有过渡或动画。一旦我使用大众单位，它看起来就很糟糕。
Thanks
我在 IE 中遇到了类似的问题，将初始值设置为 0.1vh 而不是 0 对我有所帮助。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
