html - css transition 在隐藏的 div 中不起作用

Question

我有一个隐藏的 div。我希望那个 div 能顺利地出现和隐藏。我已经应用了这个不起作用的 CSS!这是什么原因？

HTML:

<div class="a">
    <p>Hover Me</p>
    <div class="box">
        Some Text Some Text Some Text Some Text Some Text Some Text
    </div>
</div>

CSS:

.box {
    width: 500px;
    border: 1px solid #ccc;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.a:hover .box {
    visibility: visible;
    transition: height 0.1s ease;
    height: auto;
} 

Fiddle Work

Answer 1

如果您可以使用 jQuery，则可以使用它来实现悬停事件的进出平滑过渡。

jQuery

$('.a p').hover(function () {
    if ($('.box').hasClass('active')) {
        $('.box').removeClass('active');
        $('.box').stop(true, false).animate({height: "0px"}, 500);
    } else {
        $('.box').addClass('active');
        $('.box').stop(true, false).animate({height: "20px"}, 500);
    }
});

这是一个jsFiddle