Css转换不起作用

我有一个场景，在按钮点击过渡应该发生。Css转换不起作用

这些是应用的转换。在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

来源

2017-01-23 Shikha thakur

作为另一个答复中提到，IE11已经应用transition的财产，如果它的值中的一个或两个使用calc集问题。

一种解决方法是使用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>

来源

2017-01-23 16:15:04 Shaggy

-1

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

铬：没有前缀26.0 4.0使用-webkit-

IE：无前缀10.0

Mozilla的：无前缀16.0 4.0使用-moz-

Safari中：没有前缀为6.1 for 3.1使用-webkit-

Opera 12.1 for 10.5 use -o-

来源

2017-01-23 10:36:03

但它不工作，即使我删除-MS前缀 –

写这一点，并检查到头部分：也尝试在将代码运行到浏览器之前清除缓存。 –

不，这不起作用 –

这是因为你用calc()（见Known issues标签）：

IE11不支持转换（）与计算设定值

这个例子的工作原理：

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

来源

2017-01-23 12:38:57

Css转换不起作用

回答

相关问题