jquery - CSS3 过渡不能正确渲染溢出滚动

Question

我正在为我的网站构建的选项卡插件中使用不透明度转换。但是，它影响了我在 div 上的 overflow: auto。只有集合中的最后一个在滚动。这个 fiddle 解释了我在说什么:

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 是你的 friend :)

问题是，您的最后一个内容位于所有内容之上，因此会接收您所有的鼠标事件，并且显然会阻止它下面的所有其他内容。 opacity: 0 并不意味着内容不再符合鼠标事件的条件，它实际上仍然存在。制作

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

这是您更新的 fiddle .

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;
}