CSS过渡错误在Internet Explorer 11中使用视口单元11

Question

我有一个CSS转换，该过渡是通过使用jQuery/js更改属性而触发的。它运行良好，除了Internet Explorer(11(。

我不知道这里发生了什么，有什么想法吗？

编辑：问题似乎是由使用视口单元引起的。使用任何其他类型的单元时，它可以正常工作。第二个片段显示了一个有效的示例。

$('#click').click(function() {
var data_test = $('#container').attr('data-test');
if(data_test == 'one') $('#container').attr('data-test', 'two');
else $('#container').attr('data-test', 'one');
});

#container {
position: relative;
width: 100%; height: 100px;
}
#container > div {
position: absolute;
right: 1vw;
font-size: 1em;
top: 0.1em;
transition: all 1s;
}
#container[data-test="one"] > div {
transform: translate(-8vw, 15vh);
font-size: 1.3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-test="one"><div>some text</div></div>
  <div id="click">click</div>

$('#click').click(function() {
var data_test = $('#container').attr('data-test');
if(data_test == 'one') $('#container').attr('data-test', 'two');
else $('#container').attr('data-test', 'one');
});

#container {
position: relative;
width: 100%; height: 100px;
}
#container > div {
position: absolute;
right: 1vw;
font-size: 1em;
top: 0.1em;
transition: all 1s;
}
#container[data-test="one"] > div {
transform: translate(-4em, 4em);
font-size: 1.3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-test="one"><div>some text</div></div>
  <div id="click">click</div>

Answer 1

不应在顶部，右，底部或左上进行过渡。为了获得最佳性能使用变换：translatey(value(;或转换：translatex(value(; 。删除顶部道具并转换这些元素。重新涂抹可能会弄乱它。让我知道它是否有效; - (

Answer 2

显然您需要在Internet Explorer中设置变换 - 孔。参见摘要。请注意，您还需要过渡转换原始。

感谢CEWN帮助我找到答案。

$('#click').click(function() {
var data_test = $('#container').attr('data-test');
if(data_test == 'one') $('#container').attr('data-test', 'two');
else $('#container').attr('data-test', 'one');
});

#container {
position: relative;
width: 100%; height: 100px;
}
#container > div {
position: absolute;
right: 1vw;
font-size: 1em;
top: 0.1em;
transform-origin: -8vw 15vh;
transform: translate(0vw, 0vh);
transition: all 1s;
}
#container[data-test="one"] > div {
transform-origin: 0vw 0vh;
transform: translate(-8vw, 15vh);
font-size: 1.3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-test="one"><div>some text</div></div>
  <div id="click">click</div>

Answer 3

我在尝试使用 transform 旋转div的新导航菜单时遇到了类似的问题。某些DIV随着它们旋转而扩展，因此我已经设置了变换 - 原始，以确保它们围绕原始中心旋转。我正在使用视口单元进行尺寸。除了Internet Explorer外，它都可以在每个浏览器中使用。

我知道这是一个" bodge"，但是，在这里阅读IE不喜欢视口单元时，对我的快速修复是将 transform-origin：5vw 5vw 更改为变换 - 原始：calc(5vw(calc(5vw( - 该页面现在在IE中看起来与其他浏览器中相同。