Javascript Flexbox菜单动画

我正在尝试用flexbox创建一个响应菜单，我想在它出现在click on mobile上时设置动画

<nav class="flex-nav" id="test">
        <a href="#" class="toggle-nav"> &#9776;Menu</a>
        <ul id="test">
            <li class="item1"><a href="#" >Item1</a></li>
            <li class="item2"><a href="#" >Item2</a></li>
            <li class="social"><a href="#"><i class="fa fa-linkedin"></i></a></li>
            <li class="social"><a href="#"><i class="fa fa-twitter"></i></a></li>

        </ul>
    </nav>

/jQuery/

---

我尝试过的任何东西都无法获得动画效果，我尝试使用toggleClass（）上的time参数。谢谢大家!

您无法设置

显示

属性的动画，但如果您只想显示/隐藏元素，请查看

不透明度

属性，这是一种非常常见的解决方案：

$（函数（）{
$（'#test'）。在（'click'，function（）上{
$（'.flex nav ul'）.toggleClass（'open'）；
}); 
}); 
.flex导航ul{
显示器：flex；
不透明度：0；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
.flex nav ul.open{
不透明度：1；
}







检查此项
    .flex-nav ul{
    display:none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.flex-nav ul.open{
    display:flex ;
    }

$(function(){
        $('#test').on('click', function(){
            $('.flex-nav ul').toggleClass('open');

        }); 
    });