Применение эффектов перехода для замедления открытия подменю при нажатии на меню

Question

У меня есть вертикальное меню с раскрывающимся списком, когда пользователь нажимает на дочерние элементы родительского меню в этом родителе, показывается ... Детские элементы быстро открываются, я хочу замедлить скорость, когда отображаются дочерние элементы.

это демо я создал http://codepen.io/raju9642182468/pen/grWZPa

Как я замедление открытия меню speed..Somebody помочь мне, как сделать что

function showmenu(elem) { 
     // Clear any currently open menu 
     var elementClicked = event.target;   
     if (elementClicked.className != 'sectionMenu') 
      return; 
     var openMenu = document.getElementById("activeMenu"); 

     if (openMenu) { 
      openMenu.removeAttribute("id"); 
      // Stop if we're just closing the current menu 
      if (openMenu === elem) { 
       return; 
      } 
     } 
     // Only apply it if the element actually has LI child nodes. 
     // OPTIONAL: Will still work without if statement. 
     if (elem.getElementsByTagName("li")) { 
      elem.setAttribute("id", "activeMenu"); 
     }      
    } 

    function focusStyle(elem) { 
     if (document.getElementById("anchor") != null) { 
      document.getElementById("anchor").removeAttribute("id"); 
     } 
     var anchorClicked = event.target; 
     if (elem.getElementsByTagName("li")) { 
      elem.setAttribute("id", "anchor"); 
     } 

    } 

Answer 1

Вот пример, как это можно сделать с помощью CSS transition и max-height

следует отметить, так как высота одушевленные не может быть сделано с помощью height: auto, это использует max-height. Трюк, чтобы заставить его работать, заключается в том, чтобы установить его значение, которое всегда будет больше, чем фактический список меню.

Я использовал 400px в нижней части образца и, изменив это и продолжительность, можно приблизить к идеальной анимации.

function showmenu(event,elem) { 
 
    // Clear any currently open menu 
 
    var elementClicked = event.target;   
 
    if (elementClicked.className != 'sectionMenu') 
 
    return; 
 
    var openMenu = document.getElementById("activeMenu"); 
 

 
    if (openMenu) { 
 
    openMenu.removeAttribute("id"); 
 
    // Stop if we're just closing the current menu 
 
    if (openMenu === elem) { 
 
     return; 
 
    } 
 
    } 
 
    // Only apply it if the element actually has LI child nodes. 
 
    // OPTIONAL: Will still work without if statement. 
 
    if (elem.getElementsByTagName("li")) { 
 
    elem.setAttribute("id", "activeMenu"); 
 
    }      
 
} 
 

 
function focusStyle(event,elem) { 
 
    if (document.getElementById("anchor") != null) { 
 
    document.getElementById("anchor").removeAttribute("id"); 
 
    } 
 
    var anchorClicked = event.target; 
 
    if (elem.getElementsByTagName("li")) { 
 
    elem.setAttribute("id", "anchor"); 
 
    } 
 

 
}

div { 
 
    height: 100%; 
 
} 
 

 
nav{ 
 
    height:100%; 
 
} 
 
#nav1 { 
 
    background-color: \t #ffffff; 
 
    height: 100%;  
 
    cursor: pointer; 
 
} 
 
ul { 
 
    padding-left: 0px; 
 
    margin-bottom: 0px;   
 
    font-weight:400; 
 
    font-size:14px; 
 
    letter-spacing:0;   
 
} 
 
ul li { 
 
    line-height:30px; 
 
    position: relative; 
 
    color:#ff6a00; 
 
} 
 

 
ul li:hover { 
 
    background-color: #00ff21; 
 
} 
 

 
#main-menu > li.active > a { 
 
    color: #b6ff00; 
 
    background-color: #F4F4F4; 
 

 
} 
 
nav #nav1 #activeMenu .sectionMenu{ 
 
    background-color: rgb(69,199,77);   \t 
 
} 
 
ul li a{ 
 
    padding: 0.5em 1.25em 0.5em 3.125em; 
 
    font-weight: 500; 
 
    display: block; 
 
    color:#585858; 
 
    padding-left:50px;  \t 
 
} 
 
ul li a i { 
 
    position: absolute; 
 
    right: 20px; 
 
    font-size:1.5em; 
 
} 
 
ul ul { 
 
    transition: max-height 0.5s ease-out; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
} 
 
ul ul li a { 
 
    color: #7f7f7f; 
 
    padding: 0.875em 1.25em 0.875em 0.625em; 
 
    font-weight: 500; 
 
    display: block; 
 
    height: 1.875em; 
 
} 
 
#activeMenu ul { 
 
    max-height: 400px; 
 
} 
 

 
li.sectionMenu:before { 
 
    /*content: '\2795'; 
 
    content: '\1401'; 
 
    content: '\2206'; */  
 
    height:10px; 
 
    font-weight:20px; 
 
    font-size: inherit; 
 
    color: #000000; 
 
    text-rendering:auto; 
 
    float: right; 
 
    display:inline-block; 
 
    padding-right:25px; 
 
} 
 

 
#activeMenu { 
 
    background-color: #ffffff;  
 
} 
 
#anchor { 
 
    background-color:#e7e7e7; 
 
} 
 

 
ul li ul li{ 
 
    padding-left:80px; 
 
} 
 

 
ul ul li a i { 
 
    padding-right:123px; 
 
} 
 
#buildIcon{ 
 
    right: 190px;  
 
} 
 

 
span{ 
 
    float:right; 
 
} 
 
ul ul li i { 
 
    visibility:hidden; 
 
}

<ul id="nav1"> 
 

 
    <li onclick="showmenu(event,this)" class="sectionMenu dropdown"> 
 
    <a class="sectionMenu"> 
 
     Class ! 
 
    </a> 
 
    <ul> 
 
     <li> <a>        
 
     A 
 

 
     </a> 
 
     </li> 
 
     <li class="active-class" > 
 
     <a> 
 
      b 
 
     </a> 
 
     </li> 
 
     <li class="active-class" > 
 
     <a > 
 
      c 
 
     </a> 
 
     </li> 
 
     <li class="active-class" > 
 
     <a> 
 
      d 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li onclick="showmenu(event,this)" class="sectionMenu dropdown"> 
 
    <a class="sectionMenu">      
 
     Class II 
 
    </a> 
 
    <ul> 
 
     <li class="active-class"> <a>1</a> </li> 
 
     <li class="active-class"> <a>2 </a></li> 
 
     <li class="active-class"> <a>3</a> </li> 
 
     <li class="active-class"> <a>4 </a></li> 
 
     <li class="active-class"> <a>5 </a></li> 
 
     <li class="active-class"> <a>6</a> </li> 
 
    </ul> 
 
    </li> 
 

 
    <li onclick="showmenu(event,this)" class="sectionMenu dropdown"> 
 
    <a class="sectionMenu">      
 
     Class III 
 
    </a> 
 
    <ul> 
 
     <li class="active-class"> <a>1 </a></li> 
 
     <li class="active-class"> <a>2 </a></li> 
 
     <li class="active-class"> <a> 3 </a></li> 
 
     <li class="active-class"> <a>4 </a></li> 
 
     <li class="active-class"> <a>5 </a></li> 
 
     <li class="active-class"> <a>6 </a></li> 
 
    </ul> 
 
    </li> 
 
</ul>