有关二级菜单缓慢效果出现（transition）

在做二级菜单显示与不显示之间，我一开始用的是默认display：none，然后想着在js里设置单击事件，变为display：block；
HTML：

<section><img src="https://cdn2.lmonkey.com/avatar/9fb623a83a59a185111ed7003cba8507"><li>吉吉国王<i class="icon-xiajiantou iconfont"></i></li><div class="login"><ul><li><i class="icon-xinfeng iconfont"></i>我的消息</li><li><i class="icon-shuben iconfont"></i>我的学习</li><li><i class="icon-52 iconfont"></i>个人设置</li><li><i class="icon-shouye iconfont"></i>账户中心</li><li><i class="icon-w iconfont"></i>我的主页</li><hr /><li><i class="icon-tuichu iconfont"></i>退出登录</li></ul></div></section>`

css：

.login{display: none;position: absolute;background-color: #FFFFFF;top: 60px;width: 45%;z-index: 2;}

var loginn=document.querySelector(".top>section:last-child");var login=document.getElementsByClassName("login")[0];
loginn.onclick=function(){if(login.style.display=="none"){login.style.display="block";}else{login.style.display="none";}}

就感觉效果很生硬有木有！
然后我想着用个transition过渡一下，发现
transition对display不起作用!!!
transition对display不起作用!!!
transition对display不起作用!!!
经过查阅资料，transition对透明度opacity可以起作用的
修改后的代码
HTML不变
CSS

.login{opacity: 1;position: absolute;background-color: #FFFFFF;top: 60px;width: 45%;z-index: 2;}

就把display：none变成透明度为1,
JS

loginn.onclick=function(){if(login.style.opacity==1){login.style.cssText="opacity: 0; transition: opacity 0.3s;";}else{login.style.opacity=1;}}

这样的效果就是：

有关二级菜单缓慢效果出现（transition）相关推荐

Vue - 实现垂直菜单分类栏目，鼠标移入后右侧出现悬浮二级菜单容器效果（完整示例源码，详细代码注释，一键复制开箱即用）
前言网上的教程都太乱了,各种杂乱无注释代码.图片资源丢失.一堆样式代码,根本无法改造后应用到自己的项目中. 本文实现了在 Vue / Nuxt 项目中,垂直分类菜单项,当用户鼠标移入菜单后,右侧自 ...
Axure RP9——【导航栏二级菜单的展开效果】
导航栏二级菜单的展开效果 Navigation Bar · secondary menu Here's how I want things to unfold. 目录导航栏二级菜单的展开效果 Nav ...
axure学习帖-中继器二级菜单
之前制作的二级菜单,使用的是动态面板,制作起来比较复杂(可能是因为我方法不得当),最终呈现效果如下所示: 虽然实现了菜单的功能,但是非常不利于后期的维护.后来得知二级菜单可以使用中继器来完成,于是在网 ...
AXURE8.0制作二级菜单和三级菜单
今日分享:用AXURE8.0制作二级菜单和三级菜单二级菜单操作思路:首先做出一个[一级菜单]和三个[二级菜单],完成后再复制多个[一级菜单]和[二级菜单] 第一步:拖一个矩形,作为[一级菜单],命 ...
制作下拉菜单（二级菜单）
我们想实现下面这个二级菜单的效果,将鼠标放在一个视频教程的标签上,就会显示下面的二级菜单,不放的话就不显示,而且当鼠标放在二级菜单上二级菜单的字体会变色,如下图所示: 如果有二级菜单的,可以当成子标 ...
jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果
html: <div class="col-sm-3 col-md-2 sidebar"><div class="totalt">< ...
html与js二级菜单横排,JavaScript实现横向滑出的多级菜单效果
本文实例讲述了JavaScript实现横向滑出的多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JavaScript横向滑出的多级菜单,只用鼠标放上就可以动画出现二级菜单,整体设计精美,大气, ...
css二级菜单会然下面遮住_JavaScript实现下拉二级菜单详解
下拉菜单最终效果如图: 实现原理,通过绝对定位的方式,使下拉列表脱离文档流.通过js或者css来控制鼠标移入后的效果初始时可以改变 1.display:none;使其隐藏 2.height:0px; ...
css导航栏（二级菜单）
效果: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...

有关二级菜单缓慢效果出现（transition）

有关二级菜单缓慢效果出现（transition）相关推荐

最新文章

热门文章