Css 转换不起作用

Question

我有一个场景，应该在按钮单击时发生转换。

这些是应用的过渡。在 chrome 浏览器中它运行良好，但在 IE11 中尝试时未应用过渡。

我已经应用了如下所示的 CSS：

div{
    width:100px;
    height:100px;
    background:red;
    transition-property: right, left;
    transition-duration: 2s;
    -webkit-transition-property: right, left; /* Safari */
    -webkit-transition-duration: 2s; /* Safari */
    -ms-transition-property: right, left; /* Safari */
    -ms-transition-duration: 2s; /* Safari */
    position:absolute;
    right:calc(100% - 100px);
}
div:hover{
    right:0px;
}

<div></div>

任何帮助将不胜感激。DEMO

Answer 1

如另一个答案中所述，如果 IE11 的一个或两个值都使用 calc 设置，则在将transition应用于属性时出现问题。

一种解决方法是使用transform设置计算的第二个值，但是，结果可能与所需的动画不完全匹配。请注意，此处translatex函数中使用的百分比是相对于元素宽度的。

div{
    background:red;
    height:100px;
    width:100px;
    position:absolute;
    right:100%;
    transform:translatex(100%);
    transition-duration:2s;
    transition-property:right,transform;
}
div:hover{
    right:0;
    transform:translatex(0);
}

<div></div>

Answer 2

这是因为您使用了calc（）（请参阅Known issues选项卡）：

IE11 不支持使用 calc（） 设置的转换值

此示例适用于：

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-property: right, left;
    -webkit-transition-duration: 2s;
    -ms-transition-property: right, left;
    -ms-transition-duration: 2s;
    transition-property: right, left;
    transition-duration: 2s;
    position: absolute;
    right: 80%;
}
div:hover {
    right: 0;
}

<div></div>

JSFiddle

Answer 3

根据兼容性表，您不需要使用前缀 -ms- 。

Chrome：26.0 无前缀 4.0 使用-webkit-

IE：10.0 没有前缀

Mozilla：16.0 没有前缀 4.0 使用-moz-

Safari：6.1 无前缀 3.1 使用-webkit-

Opera 12.1 for 10.5 使用-o-