CSS过渡不起作用 [英] Css transition not working

问题描述

我有一个应该在按钮上单击过渡的情况。

I have a scenario where on button click transition should happen.

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

These are the transitions which were applied. In chrome browser it is working good, but in IE11 when tried the transitions aren't getting applied.

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

I have applied CSS like below:

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>

任何帮助将不胜感激。
演示

Any help would be appreciated. DEMO

推荐答案

如另一个答案中所述，如果使用<$ c设置一个或两个值，则IE11在将转换应用于属性时会遇到问题。 $ c> calc 。

As mentioned in another answer, IE11 has issues applying a transition to a property if one or both of its values are set using calc.

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

One workaround would be to set the second value of the calculation using a transform, however, the result may not match your desired animation completely. Note that the percentage used in the translatex function here is relative to the width of the element.

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过渡不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！