html - 使用 CSS 过渡淡出菜单的不透明度

Question

我的问题是这样的:

我希望当用户将鼠标悬停在其父容器上时菜单淡入和淡出可见性。我也想只用CSS来做动画。这是目前的代码:

HTML

<div class="color-dropdown">
    <div class="title">
        <h4>Red</h4>
    </div>
    <div class="options">
        <ul class="colors">
            <li>Red</li>
            <li>Blue</li>
        </ul>
    </div>
</div>

SCSS

.color-dropdown {
    height: 60px;
    overflow: hidden;

    .options {
        opacity: 0;

        /*
            The problem - This css transition never 
            gets seen on mouseout, most likely because 
            overflow is immediately hidden.
        */
        transition: opacity 0.2s linear;
    }

    &.expanded {
        overflow: visible;
        .options {
            opacity: 1;
        }
    }
}

CoffeeScript

colorDropdown = $('.color-dropdown')
title         = $('.title h4')
colors        = $('.colors li')

colorDropdown.hover ->
    # Fade in the options
    colorDropdown.addClass 'expanded'
, ->
    # Fade out - Broken!
    colorDropdown.removeClass 'expanded'

colors.click ->
    # Fade out - Broken!
    colorDropdown.removeClass 'expanded'

    # Change the current color
    title.text $(this).text()

    # CSS bounce animation (using animate.css here)
    title.addClass 'animated bounce'
    setTimeout ->
        title.removeClass 'animated bounce'
    , 1000

I've made a jsfiddle here so that you can easily see the problem .

提前致谢!

Answer 1

问题是您的 overflow:hidden <-> overflow:visible 更改...当您删除 .expanded 时，您将看不到如果父级上的溢出跳回隐藏，则子级上的过渡。

您可以通过使用子元素 (.options) 元素的可见性 转换来解决此问题。

类似这样的东西(将 transition-delay 设置为 0s)也许:

.color-dropdown {
    height: 60px;
    overflow: visible;
    .options {
        opacity: 0;
        visibility:hidden;
        transition: visibility 0s linear 0.2s, opacity 0.2s linear;
    }

    &.expanded .options {
        opacity: 1;
        visibility:visible;
        transition-delay: 0s;
    }
}

DEMO

有关此内容的更多信息，请参见:http://www.greywyvern.com/?post=337