javascript - Flexbox 菜单动画

Question

我正在尝试使用 flexbox 创建一个响应式菜单，并且我想在点击移动设备时显示动画。

<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>

/CSS 代码/

    .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 ;
    }

/jQuery/

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

        }); 
    }); 

我尝试过的任何方法都无法获得动画效果，我尝试在 toggleClass() 上使用时间参数。谢谢你!

Answer 1

您不能为 display 属性设置动画，但如果您只想显示/隐藏元素，请查看 opacity 属性，这是一个非常常见的解决方案:

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

.flex-nav ul{
  display:flex ;
  opacity: 0;
  -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 {  
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>