CSS使用calc()函数的过渡效果在IE10+中不起作用。

Question

CSS使用calc()函数的过渡效果在IE10+中不起作用。

49

我正在使用CSS过渡效果将一个容器从右侧向左侧动画化，当鼠标悬停时。这在除了Internet Explorer浏览器之外的所有浏览器中都能正常工作。原因是我在CSS的left属性中使用了calc()函数（而且需要使用它）。

我在这里创建了一个实时演示：实时演示

CSS代码如下：

div {
    background: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 90%;
    -webkit-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
div.translate-less {
    left: calc(90% - 4rem)
}

我正在使用jQuery在鼠标悬停时添加.translate-less类：

$(document)
.on( 'mouseenter', 'div', function(){
    $(this).addClass('translate-less')
})
.on( 'mouseleave', 'div', function(){
    $('div').removeClass('translate-less');
})

现在我想要在Internet Explorer中实现平滑的过渡效果。为此，我甚至愿意放弃使用calc()函数，添加一个规则，如left: 85%;。但IE10和11已经不再支持条件注释，似乎没有办法专门针对这些浏览器进行定位。可以使用-ms-high-contrast-hack针对IE10进行定位，但无法针对IE11进行定位。我不希望使用JavaScript检测浏览器，因为这似乎比使用CSS hack更加hacky。

- bootsmaat

仅使用left:85%会有什么问题，因为它可以在所有浏览器中工作？另外，为什么不直接使用.translate-less:hover而不是在鼠标悬停时添加类呢？ - Charles380

1

Charles380，left:85%和left:90%-4rem之间存在显著差异。前者的滑动距离是相对的（在宽视口上大，在窄视口上小），而后者是绝对的。这恰好是我的设计中的一个重要区别。（感谢:hover提示，但我需要在这里使用jQuery出于其他原因。基本上，我修改的元素不仅仅是这一个，不能只用:hover来定位它们。） - bootsmaat

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josef Engelfrost · Accepted Answer

也许transform: translateX()可以提供一个变通方法。根据情况，使用变形和正确的属性可能更好：

right: 10%;
transform: translateX(-4rem);

这是您脚本的修改版本：http://jsfiddle.net/xV84Z/1/。

另外，在 IE 中，您无法在 translateX() 中使用 calc()（因为存在bug），但您可以在变换中应用多个 translateX()：

/* This */
transform: translateX(90%) translateX(-4rem);
/* is equivalent to this */
transform: translateX(calc(90% - 4rem));

（但是，在这种情况下，90％表示目标的90％，而不是父级的90％。）