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个动作：

使用类
使用转换/动画正确隐藏Flexbox
使用转换/动画正确显示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>

Flexbox没有隐藏或显示流畅

1 个答案: