为什么这些转换不起作用？ (CSS3/jQuery)

Question

我对 CSS3 比较陌生，我必须完成这项工作，所以请原谅可怕的代码。我要做的就是制作一个带有手风琴导航的画布外菜单（实际上，我希望它是桌面的水平导航，移动的画布外的导航，但这是另一个故事......）。 https://jsfiddle.net/StephanieQ/uk0902qx/1/ 我正在使用 jQuery 的 slideUp/Down 方法来实现这些效果，但只是没有过渡。如果我将时间指定为函数的参数，则动画会在该持续时间内犹豫不决。

$(document).ready(function(){
    $("nav h3").click(function(){
        $("nav ul ul").slideUp();
        if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
        }
    });
});

我确信原因很明显，但我真的看不出来。而且我也更喜欢使用 toggleClass 或类似的东西，这样它更适合我的媒体查询。任何帮助都会很棒！

（丑陋的红色框代表一个标志——额外的问题：为什么图像只是弹出而不是像其他所有东西一样过渡？）

Answer 1

非常有趣的问题。

您在要上下滑动的元素上定义了一堆过渡。

  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out; 

这不适用于 JQuery 的 slideDown() 方法，因为 slideDown 会迅速改变高度值。每次该值发生数千次变化时，CSS 都会尝试花费 0.25 秒来执行该转换。因此，每一分钟的迭代都没有发生任何事情，并且转换似乎是同时发生的。

要解决此问题，请删除这些转换或使用 jQuery 来切换您提到的类。我采用第一种方法 - 删除 CSS 过渡。

工作小提琴在这里：https://jsfiddle.net/uk0902qx/4/