メニュードロップダウンメニューで滑らかなトランジションを作成するにはどうすればよいですか？

Question

私は、メニュー遷移のスムーズな移行方法を理解しようとしています。私はすでに、時代が表示され、onclickで消える機能を書いていましたが、私はどのように遷移のスタイルを設定するのか分かりません。ここで

は、私がこれまで持っているものです。

HTML：

<nav id="menu"> 
    <h2>Menu</h2> 
    <ul> 
     <li id="toggleTitle">Projects <i class="fa fa-angle-down" aria-hidden="true"></i></li> 
     <li class="projects projectsClass"><a href="#">Project 1</a></li> 
     <li class="projects projectsClass"><a href="#">Project 2</a></li> 
     <li class="projects projectsClass"><a href="#">Project 3</a></li> 
    </ul> 
</nav> 

JS：

//toggleProjects 
var toggleProjects = function(){ 

//function 
var projectsList=document.getElementsByClassName('projects'); 
// if(projectsList[0].style.display=='none'){ 
if(!projectsList[0].classList.contains('projectsClass')){ 
//reappear 
for(var i=0; i<projectsList.length; i++){ 
    // projectsList[i].style.display=''; 
    projectsList[i].classList.add('projectsClass'); 
} 

} else { 
//disappear 
for(var i=0; i<projectsList.length; i++){ 
    // projectsList[i].style.display='none'; 
    projectsList[i].classList.remove('projectsClass'); 
} 
} 
}; 

//event listener for click 
document.getElementById('toggleTitle').addEventListener('click', 
toggleProjects); 

CSS：

.projectsClass { 
    display: none; 
} 

.projects { 
    margin-left: 30px; 
} 

#menu > .toggleTitle { 
    padding: 1em 0; 
    line-height: 1.5; 
    border: 0; 
    color: white; 
} 

jsfiddlelink：https://jsfiddle.net/j2fygbzb/

Answer 1

私はそれがあなたのコードを使ってあなたが期待しているものと似たようなことをしました。私はここでフィドルだ.projectsに遷移CSSプロパティを追加しました：

https://jsfiddle.net/j2fygbzb/9/

ここで私が変更CSSです：

.projectsClass { 
    max-height: 0 !important; 
    visibility: hidden !important; 
} 

.projects { 
    margin-left: 30px; 
    max-height: 20px; 
    visibility: visible; 
    transition: all 0.5s; 
}