为什么这些过渡不起作用? (CSS3 / jQuery)

发布时间:2020-09-15 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了为什么这些过渡不起作用? (CSS3 / jQuery)编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我对 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或类似的东西,以便它更适合我的媒体查询.任何帮助都会很精彩!

(丑陋的红色框代表一个标志 – 奖金问题:为什么图像只是突然而不是像其他一样过渡?)

解决方法

真的很有趣的问题.

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

-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)全部内容,希望文章能够帮你解决为什么这些过渡不起作用? (CSS3 / jQuery)所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478