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/

为什么这些过渡不起作用？（CSS3 / jQuery）

1 个答案:

为什么这些过渡不起作用？ （CSS3 / jQuery）

1 个答案:

为什么这些过渡不起作用？（CSS3 / jQuery）