带有 calc() 的 CSS 转换在 IE10+ 中不起作用 [英] CSS transitions with calc() do not work in IE10+

问题描述

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

我在这里创建了一个现场演示:现场演示

CSS 看起来像这样:

div {背景:红色；宽度:100px；高度:100px；位置:绝对；顶部:100px；左:90%；-webkit-transition: 左 0.7s 立方贝塞尔曲线 (0.77, 0, 0.175, 1);-moz-transition: 左 0.7s 立方贝塞尔曲线 (0.77, 0, 0.175, 1);-o-transition: 左 0.7s 三次贝塞尔曲线 (0.77, 0, 0.175, 1);过渡:左 0.7s 三次贝塞尔曲线(0.77, 0, 0.175, 1)；}div.translate-less {左:计算(90% - 4rem)}

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

$(文档).on( '鼠标输入', 'div', 函数(){$(this).addClass('translate-less')}).on('mouseleave', 'div', function(){$('div').removeClass('translate-less');})

现在我想在 Internet Explorer 中平稳过渡.为此，我什至会放弃这些特定浏览器的 calc() 并添加像 left: 85%; 这样的规则.但是 IE 10 和 11 已经被删除支持条件注释，似乎没有办法专门针对这些浏览器.可以使用 -ms-high-contrast-hack，但 IE 11 不能.我不想使用JavaScript来检测浏览器，因为这似乎比使用 CSS hack 还要hacker.

解决方案

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

正确:10%；变换:translateX(-4rem);

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

或者，虽然您不能在 IE 中的 translateX() 中使用 calc()(因为 一个错误)，你可以应用多个translateX()转换:

/* 这个 */变换:translateX(90%) translateX(-4rem);/* 相当于这个 */变换:translateX(calc(90% - 4rem));

(但是，在这种情况下，90% 表示目标的 90%，而不是父项.)

I am animating a container on mouseover from right to the left with CSS transitions. This works fine in all browsers except Internet Explorer. The reason is that I am using (and need to use) calc() in my CSS left property.

I created a live demo here: Live Demo

The CSS looks like this:

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

I am adding the class .translate-less on mouseover with jQuery:

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

Now I would like to have a smooth transition in Internet Explorer. For that, I would even ditch the calc() for these specific browsers and add a rule like left: 85%;. But IE 10 and 11 have dropped support for conditional comments and there seems to be no way to target these browsers specifically. IE 10 can be targeted with the -ms-high-contrast-hack, but IE 11 cannot. I do not want to use JavaScript to detect the browser because this seems even hackier than using CSS hacks.

解决方案

Maybe transform: translateX() can provide a work-around. Depending on the circumstances, using transforms and the right property might be better:

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

Here is a modified version of your script: http://jsfiddle.net/xV84Z/1/.

Alternatively, while you can't use calc() within a translateX() in IE (because of a bug), you can apply multiple translateX()s in a transform:

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

(However, 90% in this case means 90% of the target, not the parent.)

这篇关于带有 calc() 的 CSS 转换在 IE10+ 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！