使用 calc() 的 CSS 过渡在 IE10+ 中不起作用

Posted 2023-03-06

【中文标题】使用 calc() 的 CSS 过渡在 IE10+ 中不起作用

【英文标题】：CSS transitions with calc() do not work in IE10+

【发布时间】：2014-02-04 05:55:15

【问题描述】：

我在鼠标悬停时使用 CSS 过渡从右到左为容器设置动画。这适用于除 Internet Explorer 之外的所有浏览器。原因是我在我的 CSS left 属性中使用（并且需要使用）calc()。

我在这里创建了一个现场演示：Live Demo

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%; 的规则。但是 IE 10 和 11 有 dropped support for conditional comments 并且似乎没有办法专门针对这些浏览器。 IE 10 可以使用-ms-high-contrast-hack 定位，但 IE 11 不能。我不想use javascript 来检测浏览器，因为这似乎比使用 CSS hack 更 hack。

【问题讨论】：

只使用 left:85% 有什么问题，因为它适用于所有浏览器？还有为什么不直接使用 .translate-less:hover 而不是在鼠标悬停时添加一个类。

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

【参考方案1】：

也许transform: translateX() 可以提供解决方法。根据具体情况，使用转换和正确的属性可能会更好：

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

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

另外，虽然您不能在 IE 中的 translateX() 中使用 calc()（因为 a bug），但您可以在转换中应用多个 translateX()s：

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

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

【讨论】：

哇...这是一个很好的答案！我有一个相关的问题 - 我想将 calc() 与 translateX 一起使用，但它在 Chrome、Safari 和 Firefox 中有效 - 它不适用于 IE。因此，您在单个转换中使用 multiple translateXs 的解决方案非常方便！只是出于好奇 - 你知道为什么它在 IE 中不起作用吗？这不是规范的一部分，还是只是一个错误？

@mattstuehler It's a bug

那么如果你需要 90% 的父母而不是目标，解决方案是什么？

我假设 right: 10%; 在您的上下文中不起作用。你对父母有什么了解？它的宽度是隐式的还是显式的？周围的环境中是否有你可以知道或假设的事情？或者更好的是，你有例子吗？

谢谢！如果您为属性设置动画/转换，则第二种解决方案的性能会更高，因为right 会触发重绘。