带有calc()的CSS过渡在IE10 +中不起作用 [英] CSS transitions with calc() do not work in IE10+
问题描述
我正在使用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%;
之类的规则.但是IE 10和11已已删除支持条件注释,而且似乎没有办法专门针对这些浏览器.可以通过 -ms-high-contrast-hack ,但IE 11无法.我不想使用JavaScript 来检测浏览器,因为这似乎比使用CSS骇客还要骇人.
也许transform: translateX()
可以提供一种解决方法.根据情况,使用转换和正确的属性可能会更好:
right: 10%;
transform: translateX(-4rem);
这是脚本的修改版本: http://jsfiddle.net/xV84Z/1/.>
或者,虽然您不能在IE的translateX()
中使用calc()
(因为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屋!