• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > JS、jQ >  设置了display:none到d正文

设置了display:none到display:block后,transition动画无效

作者:网页模板
类型:图文教程
点击次数:
发布时间:2018-01-22 14:50
分享到:
    设置了display:none到display:block后,transition动画无效,比如下面的代码:
ul{top:0; transition:all 500ms; display:none;}
div:hover ul{top:100px; display:block;}
    当鼠标移动到ul,ul直接出现在top:100px的位置,没有动画效果。

    可以改为设置visibility:hidden和visibility:visible,动画效果是有效的。但是可能会影响布局,因为visibility隐藏后,ul还是把原来的位置占着。用opacity的话和visibility一样。

    用jQuery方法:
$('div').hover(function(){
    $(this).find('ul').show().animate({
        top : 100
    },500);
},function(){
    $(this).find('ul').show().animate({
        top : 0
    },500,function(){
        $('ul').hide();
    });
})

(责任编辑:网页模板)
  • 本文标签:
  • transition动画无效
css3 animation动画执行结束,停顿几秒后重新开始执行
html5 plus 调用浏览器打开app内网址