更改布局时防止 CSS 淡入淡出

Question

所以我有一个 div，上面有一个基本的 CSS 不透明度设置：

.fade {
    opacity: 1;
}

<div class="menu">
    <div class="fade">Text</div>
</div>

棘手的是，对于大屏幕尺寸，此 div 意味着始终可见，但在较小的屏幕上，它意味着隐藏，然后在按下按钮时淡出 in/out点击了。

<div class="menu toggled">
    <div class="fade">Text</div>
</div>

@media(max-width:767px) {
    .fade {
        -webkit-transition: opacity 0.5s ease 0s;
        transition: opacity 0.5s ease 0s;
        opacity: 0;
    }

    .toggled .fade {
        opacity: 1;
    }
}

我运行遇到的问题（我意识到它很挑剔）是当我调整 window 的大小时，越过阈值到较小的屏幕尺寸会导致元素跳转到它的新位置然后淡出。这看起来很奇怪。我只希望 div 在捕捉到新位置时立即变得不可见。有没有一种方法可以在不破坏较小屏幕尺寸上切换按钮的淡入淡出 in/out 变换的情况下做到这一点？

我想出了一些解决方案来防止在调整大小时出现淡入淡出，但到目前为止，它们都在使用切换时破坏了淡出动画。

提前致谢！

更新 1：

感谢@Chris James Champeaux 的回答！我对它进行了一些修改以满足我的需要：

$(".menu").each(function ()
{
    if ($(this).hasClass("toggled"))
    {
        $(this).removeClass("toggled");
        $(this).children(".fade").each(function ()
        {
            $opacity = $(this).css("opacity");
            $(this).stop(true).animate({ "opacity": "0" }, 500 * $opacity, function ()
            {
                $(this).css("opacity", "");
            });
        });
    }
    else
    {
        $(this).addClass("toggled");
        $(this).children(".fade").each(function ()
        {
            $opacity = $(this).css("opacity");
            $(this).stop(true).animate({ "opacity": "1" }, 500 * (1 - $opacity));
        });
    }
});

在淡出后清除内联不透明度样式的回调是必要的，以便将控制权交还给样式表（否则在转换回较大的屏幕尺寸时元素将保持隐藏状态）。

stop() 调用和插值持续时间是可选的，如果用户在淡入淡出完成之前再次按下按钮，动画会平滑地反转。

总之，问题解决了。 :) 再次感谢克里斯！

更新 2：

也只是为了向以后遇到此问题的任何人澄清...使用此解决方案，您还可以从样式表中删除不透明动画，使其像这样：

.fade {
    opacity: 1;
}

@media(max-width:767px) {
    .fade {
        opacity: 0;
    }
}

Answer 1

您可以在 jquery 中通过单击来设置淡入淡出的动画效果，可能还可以使用 javascript。

$(".toggle").click(function () {
    if ($(".fade").css("opacity") > 0) {
        $(".fade).animate({"opacity": "0"}, 500);
    } else {
        $(".fade).animate({"opacity": "1"}, 500);
    }
});

我没有对此进行测试，但它应该可以工作

更改布局时防止 CSS 淡入淡出

Prevent CSS Fade when Changing Layout

html

css

css-transforms