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＆lt; - ＆gt; overflow: visible更改...当您移除.expanded时，如果父级上的溢出跳回隐藏状态，您将看不到子级的转换。

您可以使用子级visibility元素.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

使用css过渡淡出菜单的不透明度

1 个答案:

DEMO