CSS3过渡没有正确渲染溢出滚动

Question

我正在为我的网站构建一个标签插件，在不透明度上使用过渡。但是，它影响了我在div上的overflow: auto。只有集合中最后一个是滚动的。这个小提琴解释了我在说什么:

http://jsfiddle.net/ubbpbmfs/

这是我的HTML:

<div class="content">
    <div class="tab-content active" id="breeding">
        <h1>Breeding</h1>
        <p>Want to try your chances at getting a unique combination of two of the rabbits you own? Welcome to breeding! This takes place 
            in your habitat and heavily relies on the relationship of these two rabbits. Rabbits are genderless meaning you can breed 
            any two rabbits together, given you have the correct carrot item for it.</p>
    </div>
    <div class="tab-content" id="adventure">
        <h1>Adventure</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dui tortor, eu fermentum libero condimentum hendrerit. 
            Duis efficitur faucibus varius. Suspendisse at turpis sit amet enim tincidunt tincidunt ac non urna. Praesent eget neque 
            gravida tellus lobortis aliqu.</p>
    </div>
    <div class="tab-content" id="habitats">
        <h1>Habitats</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dui tortor, eu fermentum libero condimentum hendrerit. 
            Duis efficitur faucibus varius. Suspendisse at turpis sit amet enim tincidunt tincidunt ac non urna. Praesent eget neque 
            gravida tellus lobortis aliqu.</p>
    </div>
    <div class="tab-content" id="gardening">
        <h1>Gardening</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dui tortor, eu fermentum libero condimentum hendrerit. 
            Duis efficitur faucibus varius. Suspendisse at turpis sit amet enim tincidunt tincidunt ac non urna. Praesent eget neque 
            gravida tellus lobortis aliqu.</p>
    </div>
    <div class="tab-content" id="fishing">
        <h1>Fishing</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dui tortor, eu fermentum libero condimentum hendrerit. 
            Duis efficitur faucibus varius. Suspendisse at turpis sit amet enim tincidunt tincidunt ac non urna. Praesent eget neque 
            gravida tellus lobortis aliqu.</p>
    </div>
</div>
<a href="#" class="change" data-content="breeding">Change content to breeding</a> | 
<a href="#" class="change" data-content="adventure">Change content to adventure</a> | 
<a href="#" class="change" data-content="habitats">Change content to habitats</a> | 
<a href="#" class="change" data-content="gardening">Change content to gardening</a> | 
<a href="#" class="change" data-content="fishing">Change content to fishing</a>

我的CSS:

.content {
    width: 100%;
    border: 1px solid #d2d2d2;
    position: relative;
    height: 150px;
}
    .content .tab-content {
        padding: 25px;
        box-sizing: border-box;
        opacity: 0;
        transition: opacity .25s ease-in-out;
        position: absolute;
        left: 0;
        height: 150px;
        overflow-y: scroll;
    }
        .content .active {
            opacity: 1;
        }

和jQuery:

$('.change').on('click', function(e) {
    e.preventDefault();
    $('.tab-content').removeClass('active');
    $('#' + $(this).data('content')).addClass('active');
});

谢谢你的帮助

Answer 1

visibility是你的朋友:)

问题是，你的最后一个内容是在一切的顶部，因此接收所有的鼠标事件，显然阻止它下面的所有其他内容。opacity: 0并不意味着内容不再适合鼠标事件，它实际上仍然存在。使

只需在.content .tab-content规则中添加visibility: hidden;作为另一个规则，在opacity旁边的.content .active规则中添加visibility: inherit;，您就完成了。

这是你更新的小提琴。

CSS:

.content {
    width: 100%;
    border: 1px solid #d2d2d2;
    position: relative;
    height: 150px;
}
.content .tab-content {
    padding: 25px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease-in-out;
    position: absolute;
    left: 0;
    height: 150px;
    overflow-y: scroll;
}
.content .active {
    opacity: 1;
    visibility: inherit;
}