如何同时使用 jQuery fadeToggle() 和 CSS flexbox？

Question

我找到了一些类似的答案，但没有专门针对我的挑战。我确信我的问题有一个简单的解决方案，但我是 jQuery 的新手，所以如果我问这个问题是个傻瓜，我提前道歉。

也就是说……

我有一个带有fadeIn() 效果的基本内容div，通过单击按钮来处理。目前，内容 div 的样式为 flexbox，看起来相当不错。我想做的是能够在每次用户单击按钮时使用淡入/淡出效果切换内容 div。然而，由于 display 属性的 flex 值，jQuery fadeToggle() 方法似乎并不能很好地发挥作用。在类似的情况下 - 减去切换 - 我刚刚通过执行以下操作将显示值从 none 更改为 flex：

$(‘#someElement’).css(‘display’, ‘flex’).hide().fadeIn()

笨拙且可能是错误的，但它确实有效。只是没有fadeToggle()。有没有更好的方法来处理这个问题，或者我应该跳过fadeToggle() 并使用fadeIn()/fadeOut()？

提前感谢您的帮助。

JSFiddle

<style>
body {
    font-size: 16px;
    color: white;
    padding: 20px;
}

.about-btn {
    background: #0069a6;
    width: 135px;
    height: 35px;
    text-align: center;
    padding-top: 20px;
}
.about-wrapper {
    background: #0069a6;
    box-shadow: 0 20px 80px 0 rgba(0, 0, 0, .45);
    position: absolute;
    bottom: 130px;
    height: 200px;
    width: 500px;
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.about {
    width: 80%;
    height: 50%;
    float: left;
    text-align: justify;
}
.about-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px; 
}
</style>

<div class="about-btn">
  CLICK ME
</div>

<div class="about-wrapper">
  <div class="about-close">
    <span class="about-icon">X</span>
  </div>
  <div class="about">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a auctor turpis. Aenean eleifend augue eget ex laoreet, eget cursus ante lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent dapibus enim nec nunc bibendum, quis consequat urna laoreet. 
  </div>
</div>

<script>
$('.about-btn').on('click', function(){
  $('.about-wrapper').css("display", "flex").hide().fadeToggle();
})

$('.about-close').on('click', function() {
    $('.about-wrapper').fadeOut();
});
</script>

Answer 1

你可以在切换后设置css属性，所以display: flex;仍然存在。

$('.your-element-selector').fadeToggle().css('display', 'flex');

Answer 2

fadeToggle restores the display type when fading in the element（到它消失之前的那个），但只有当初始的display 不是none 时。如果没有，jquery 无法知道淡入后你想要什么显示，因此它使用默认的block。所以是的，只要您希望最初隐藏元素，您就必须在这里使用fadeIn 和fadeOut。

另外，由于您使用的是新标准中的 flexbox，我建议使用 css 转换来做类似淡入淡出的动画，因为它是浏览器原生支持的，所以性能更好，而 jquery 使用 javascript 一点一点地改变不透明度值，这在过去拯救了我们，但现在可以用更好的解决方案代替。

Answer 3

我知道这并不能完全回答 OP，但一个简单的解决方法（可能会帮助遇到这篇文章的人）将元素包装在一个普通的 div 中，然后像这样应用 .fadeToggle：

  $(document).ready(function () {
    $('#clickMe').click(function () {
      $('#normalDiv').fadeToggle();
    })
  });

.someFlexBox{display: flex;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="normalDiv">
  <div class="someFlexBox">
    <div class="flex-rows">a</div>
    <div class="flex-rows">b</div>
    <div class="flex-rows">c</div>
  </div>
</div>
<button id="clickMe">click me</button>