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

根据兼容性 table 你不需要使用前缀 -ms-.

Chrome: no prefix for 26.0 for 4.0 use -webkit-

IE: no prefix for 10.0

Mozilla: no prefix for 16.0 for 4.0 use -moz-

Safari: no prefix for 6.1 for 3.1 use -webkit-

Opera 12.1 for 10.5 use -o-

Answer 2

这是因为您使用了 calc()（参见 Known issues 标签）：

IE11 does not support transitioning values set with 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

如另一个答案中所述，如果使用 calc.

设置一个或两个值，则 IE11 在将 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>

Css 过渡无效

Css transition not working

css

css-transitions

internet-explorer-11