实现二级菜单的滑动出现与消失(解决dispaly与transition冲突问题)

fnngj 发布于2019-08-22 18:03 / 1266人阅读

摘要：解决与冲突的问题思路因为和有冲突只要就不起作用在开始变为然后设置为秒后在改变其他的如或等可以过渡的在最后用监听一次过渡结束事件链接演示代码如下实现二级菜单的滑动出现与消失加到属性里加到属性里这段用写在的属性上方便进行修改作

解决transition与display冲突的问题

思路:

因为transition和display有冲突,只要dispaly,transition就不起作用,在开始css,变display为block,然后setTimeout设置为1秒后,在改变其他的css,如opcity或right等可以过渡的css

在最后用监听一次过渡结束事件one("transitionend",()=>{...}));

链接githubDemo演示

代码如下:
实现二级菜单的滑动出现与消失




    
    transitionTest2_submeau

GPU云服务器云服务器阿里云服务器出现问题怎么解决栈的实现与应用回调的原理、实现与应用 java与安全有冲突

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95437.html

下拉滑动二级菜单

摘要：下拉滑动二级菜单的应用还挺多的，比较美观。难点在把层次关系搞清楚，否则布局都不知道从何下手。主要分为三层底层是，高度为，宽度触发高度变为注意要写，否则超出来的就会一直显示设置过渡属性才会出现滑动的效果，由触发。下拉滑动二级菜单的应用还挺多的，比较美观。各层之间颜色的搭配挺重要的，多试几次。难点在把层次关系搞清楚，否则html布局都不知道从何下手。主要分为三层底层是class=...

Michael_Lin 2019-08-30 13:21 评论0 收藏0
下拉滑动二级菜单

摘要：下拉滑动二级菜单的应用还挺多的，比较美观。难点在把层次关系搞清楚，否则布局都不知道从何下手。主要分为三层底层是，高度为，宽度触发高度变为注意要写，否则超出来的就会一直显示设置过渡属性才会出现滑动的效果，由触发。下拉滑动二级菜单的应用还挺多的，比较美观。各层之间颜色的搭配挺重要的，多试几次。难点在把层次关系搞清楚，否则html布局都不知道从何下手。主要分为三层底层是class=...

gggggggbong 2019-08-01 16:09 评论0 收藏0
(个人笔记)在给在线简历添加js特效过程中遇到的问题及解决方法一

摘要：个人笔记在给在线简历添加特效过程中遇到的问题及解决方法一预览页面滚动元素的事件处理函数。语法参数是一个函数的引用。事件是当窗口发生滚动得时候触发的事件返回文档在垂直方向已滚动的像素值。 (个人笔记)在给在线简历添加js特效过程中遇到的问题及解决方法一 github预览页面滚动demo 元素的 scroll 事件处理函数。语法 element.onscroll = functionR...

Yuanf 2019-08-22 17:07 评论0 收藏0
CSS学习摘要-定位实例

摘要：学习摘要定位实例学习摘要定位实例注全文摘自定位实例列表消息盒子列表消息盒子我们研究的第一个例子是一个经典的选项卡消息框，你想用一块小区域包括大量信息时，一个非常常用的特征。删除你的不需要居中显示，添加定位调整属性把她粘在浏览器的视域。CSS学习摘要-定位实例注：全文摘自MDN-CSS定位实例列表消息盒子我们研究的第一个例子是一个经典的选项卡消息框，你想用一块小区域包括大量信息时，一个非...

kuangcaibao 2019-04-23 13:39 评论0 收藏0