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

Question

我是 CSS3 的新手，我必须完成这项工作所以请原谅可怕的代码。我想要做的就是制作一个带有手风琴导航的 off-canvas 菜单（实际上，我希望它是桌面的水平导航，移动设备的 off-canvas 但这是另一回事了..） . 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 切换 class，就像您提到的那样。我采用第一种方法 - 删除 CSS 转换。

工作 fiddle 在这里：https://jsfiddle.net/uk0902qx/4/

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

Why aren't these transitions working? (CSS3 / jQuery)

css

jquery

css-transitions

responsive-design