切换＆＃34;显示＆＃34;下拉菜单中CSS转换之前/之后的属性

Question

我尝试创建一个下拉菜单，点击一个切换图标。

这是jsFiddle with a very simplified example。脚本的核心是：

if( !$(target).hasClass('open') )
    $(target).show().addClass('open');
else
    $(target).removeClass('open').on('transitionend',function(e){
      $(target).hide();
  });

我的问题是子菜单必须显示从0到1的transform:scale()，但是我需要那个容器（由红色边框高亮显示）调整它的大小取决于子菜单的外观。

隐藏它可以正确运行我的代码，但显示它不会触发scale转换，我不知道如何解决...

Answer 1

使用动画切换CSS时，请使用visibility: hidden代替display: none。这也涉及jQuery show / hide的使用。