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

Posted 2023-03-03

【中文标题】使用 CSS 过渡淡出菜单的不透明度

【英文标题】：Fading out a menu's opacity with css transitions

【发布时间】：2013-12-17 14:59:34

【问题描述】：

我的问题是这样的：

当用户将鼠标悬停在其父容器上时，我希望菜单淡入淡出。我也想只用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;
        
    

咖啡脚本

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.

提前致谢！

【问题讨论】：

如果我正确解释了您的 scss cmets，则不会触发过渡淡入淡出，因此淡出没有过渡？

抱歉，CSS 中的过渡目前不能与：背景渐变、不透明度一起使用。你不能在 CSS 中做到这一点。

我有点困惑@setek。在我的 jsfiddle 中，不透明度转换工作正常。溢出立即隐藏的事实阻止了淡出显示。还是我误会了什么？

@TaylorLapeyre 哎呀我的错误，对不起，它似乎确实有效。必须只是背景渐变。

【参考方案1】：

问题是您的overflow: hidden overflow: visible 更改...当您删除.expanded 时，如果父级的溢出跳回隐藏，您将看不到子级的转换。

您可以通过在子 (.options) 元素的 visibility 上使用过渡来解决此问题。

可能是这样的（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