CSS过渡,可见性不起作用

在下面的小提琴中,我分别对可见性和不透明度进行了转换.后者有效,但前者没有.此外,在可见性的情况下,转换时间被解释为悬停时的延迟.适用于Chrome和Firefox.这是一个错误吗？

http://jsfiddle.net/0r218mdo/3/

情况1:

#inner{
    visibility:hidden;
    transition:visibility 1000ms;
}
#outer:hover #inner{
    visibility:visible;
}

案例2:

#inner1{
    opacity:0;
    transition:opacity 1000ms;
}
#outer1:hover #inner1{
    opacity:1;
}

SW4.. 127

这不是一个错误 - 你只能转换序数/可计算属性(一种简单的思考方式是具有数字开始和结束数值的任何属性.虽然有一些例外).

这是因为过渡通过计算两个值之间的关键帧来工作,并通过外推中间量来产生动画.

visibility 在这种情况下是一个二进制设置(可见/隐藏),所以一旦过渡持续时间过去,属性只是切换状态,你看这是一个延迟 - 但它实际上可以看作过渡动画的最终关键帧,与中间关键帧尚未计算(隐藏/可见之间的值是什么？不透明度？尺寸？因为它不明确,所以不计算它们).

opacity 是一个值设置(0-1),因此可以在提供的持续时间内计算关键帧.

可以在此处找到可转换(可动画)属性的列表

这不是一个错误 - 你只能转换序数/可计算属性(一种简单的思考方式是具有数字开始和结束数值的任何属性.虽然有一些例外).

这是因为过渡通过计算两个值之间的关键帧来工作,并通过外推中间量来产生动画.

visibility 在这种情况下是一个二进制设置(可见/隐藏),所以一旦过渡持续时间过去,属性只是切换状态,你看这是一个延迟 - 但它实际上可以看作过渡动画的最终关键帧,与中间关键帧尚未计算(隐藏/可见之间的值是什么？不透明度？尺寸？因为它不明确,所以不计算它们).

opacity 是一个值设置(0-1),因此可以在提供的持续时间内计算关键帧.

可以在此处找到可转换(可动画)属性的列表

可见性是可动画的.查看此博客文章:http://www.greywyvern.com/？ post = 337

你也可以在这里看到它:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

假设您有一个菜单,您希望在鼠标悬停时淡入和淡出.如果opacity:0仅使用,您的透明菜单仍然存在,当您将鼠标悬停在不可见区域时,它将生成动画.但是如果你添加visibility:hidden,你可以消除这个问题:

div {
    width:100px;
    height:20px;
}
.menu {
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear,opacity 0.3s linear;
    
    background:#eee;
    width:100px;
    margin:0;
    padding:5px;
    list-style:none;
}
div:hover > .menu {
    visibility:visible;
    opacity:1;
}

  Open Menu
  

    
Item
    
Item
    
Item