javascript - Flexbox 隐藏或显示不流畅

Question

我有一个包含 3 个元素的 flexbox。 1 个静态、1 个隐藏和 1 个可见。

隐藏和可见元素也是 flexbox display: flex;。

我想要的是隐藏可见元素并显示隐藏元素。我尝试使用 slideDown 和 slideUp JQuery 函数，但最后我的元素变成了 display: block; 并且显示困惑.

结构:

CSS:

.nodispitem {
    display:                    none;
}

.genericNestedBloc__class {
    height:                         auto;
    width:                          auto;
    display:                        inline-flex;
    justify-content:                center;
    align-items:                    center;
    align-self:                     stretch;
}

我试过的Js功能:

$(selector).css("display", "flex").hide().slideDown(speed, function () {
     callback();
});

$(selector).slideUp(speed, function () {
     callback();
});

或

$(selector).slideDown(speed, function () {
     callback();
});

或

 $(selector).slideUp(speed, function () {
      $(selector).css("display", "flex");
      callback();
 });

但这一切都不起作用。

演出事件结束时我需要拥有的东西:

演出结束后我有什么:

我找到了一种正确显示/隐藏元素但没有平滑效果的方法，这是必要的!

假设要实现 3 个操作:

1. 使用类隐藏 flexbox
2. 使用过渡/动画正确隐藏 flexbox
3. 使用过渡/动画正确显示 flexbox

Answer 1

不确定这是否是您想要的，但我想这是一个开始...

$("button").on("click", function(){
  var $self = $(this);
  var $elem =  $(this).siblings("div");
  $elem.toggleClass("slideUp");
  
  if($elem.hasClass("slideUp"))
    $self.text("Show");
  else
    $self.text("Hide");
});

.uc{
  display: inline-block;
  width: 100px;
  border-bottom: 1px solid black;
  text-align: center;
  margin-bottom: 10px;
}
.generic{
   height: 100px;
   width: 100px;
   display: flex;
   justify-content: center;
   align-items: center;
   align-self: stretch;
  background-color: red;
  margin-bottom: 5px;
  transition: all .5s linear;
}
.blue{background-color: blue;}


.slideUp{
  height: 0;
  transition: all .5s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="one" class="uc">UC</div>
  <div class="box_wrapper">
    <div id="hidden" class="snow generic slideUp"></div>
    <button>Show</button>
  </div>
  <div class="box_wrapper">
     <div id="three" class=" sun generic blue"></div>
    <button>Hide</button>
  </div>
 
  
</div>