Question

我有一个场景，按钮点击过渡应该发生。

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

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

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

任何帮助将不胜感激。 DEMO

Answer 1

正如另一个答案中所提到的，如果使用transition设置了一个或两个值，IE11在向属性应用calc时会出现问题。

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

＆＃13;

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);
}

＆＃13;

<div></div>

＆＃13;

Answer 2

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

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

此示例有效：

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

JSFiddle

Answer 3

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

Chrome：使用-webkit-
时没有26.0 for 4.0的前缀
IE：没有10.0的前缀

Mozilla：对于4.0使用-moz-
，没有16.0的前缀
Safari：3.1 for 3.1使用-webkit-
没有前缀
Opera 12.1 for 10.5使用-o-

Css转换不起作用

3 个答案: