Question

我制作了依赖于过渡剪辑属性的菜单。它适用于除IE之外的所有浏览器。这个jsfiddle说明了我的用例：http://jsfiddle.net/dotnetCarpenter/WTL2r/我希望这可以在IE10中运行，但是使用IE11进行测试表明它只是在两个状态之间跳转。

基本上我有一个被clip: rect(auto, auto, 0, auto);隐藏的列表，并显示为clip: rect(auto, auto, 10rem, auto);。

根据All you need to know about CSS Transitions，clip属性是动画效果最高的属性。所以我有点想和它一起去。

以下是jsfiddle的简化版本：

HTML：

<h3>Hover here</h3>
<ul>
    <li>This</li>
    <li>list</li>
    <li>is</li>
    <li>clipped.</li>
    <li>A clip</li>
    <li>transition</li>
    <li>will</li>
    <li>show it</li>
</ul>

CSS：

ul {
    clip: rect(auto, auto, 0, auto);
    position: absolute;
    transition-delay: 0.29s;
    transition-property: clip;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
h3:hover ~ ul, h3:active ~ ul {
    clip: rect(auto, auto, 10rem, auto);
}

Answer 1

让浏览器更轻松

我用

测试了它

ul {
    clip: rect(0, 999px, 0, 0);
}

和

h3:hover ~ ul, h3:active ~ ul {
    clip:rect(0px, 999px, 10rem, 0px);
}

并且它起作用（fiddle），至少在IE11中。

通常浏览器在转换非数字属性时会遇到问题。我同意应该轻松处理从auto 到的转换，但如果没有，则恢复为数值

过渡剪辑：IE中的rect没有动画 - 这是一个错误，是否有解决方法？

1 个答案: