CSS 在 Internet Explorer 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

不应再在顶部、右侧、底部或左侧进行过渡。为了获得最佳性能，请使用 transform: translateY(value);或转换：translateX(value);。删除顶部道具并转换这些元素。重绘可能搞砸了。让我知道它是否有效 ;-)

Answer 2

显然您需要在 Internet Explorer 中设置 transform-origin。请参阅片段。请注意，您还需要转换 transform-origin.

感谢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

我运行在尝试使用 t运行sform 旋转 DIV 的新导航菜单时遇到了类似的问题。一些 DIV 旋转时会膨胀，所以我已经设置了 transform-origin 以确保它们围绕原始中心旋转。我正在使用视口单位来调整大小。它适用于除 Internet Explorer 之外的所有浏览器。

我知道它是 "bodge"，但是，在这里读到 IE 不喜欢视口单位后，我的一个快速解决方法是更改 transform-origin: 5vw 5vw 到 transform-origin: calc(5vw) calc(5vw) - 该页面现在在 IE 中看起来与在其他浏览器中一样。

CSS 在 Internet Explorer 11 中使用视口单位时的过渡错误

CSS transition bug when using viewport units in Internet Explorer 11

css

internet-explorer

css-transitions

css-transforms

viewport-units