2.7K Star 16K Fork 3.6K

GVPLayui / layui

 / 详情

关于左侧垂直菜单伸缩怎么加动效?

已完成
创建于  
2022-12-14 13:39

说明

layuiAdmin 纯静态 UI 主题
v1.9.0

输入图片说明

左侧菜单这个伸缩展开太快,如果希望增加动效,比如 伸缩和展开 速度慢有一点。

这个需要怎么改?

评论 (2)

fei 创建了任务

这个因为内部 nav 组件有强制进行显示隐藏操作,所以要在外部加过渡动画会比较困难, 但也有粗糙的方法实现动效 ,将以下代码放置在你的 js 文件中即可:

var $ = layui.$;
$('.layui-nav-tree a').on('click', function(e){
  var othis = $(this);
  var parent = othis.parent();
  var child = othis.siblings('.layui-nav-child');
  var ITEMED = 'layui-nav-itemed';

  if(parent.hasClass(ITEMED)){
    parent.removeClass(ITEMED);
    child.slideDown();
    parent.addClass(ITEMED);
  } else {
    parent.addClass(ITEMED);
    child.slideUp();
    parent.removeClass(ITEMED);
  }
});

好的,谢谢

贤心 添加了
 
常见
标签
贤心 修改了描述
贤心 修改了标题
贤心 任务状态待办的 修改为已完成

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(2)
92529 sentsin 1578917144
JavaScript
1
https://gitee.com/layui/layui.git
git@gitee.com:layui/layui.git
layui
layui
layui

搜索帮助

53164aa7 5694891 3bd8fe86 5694891