javascript - Flexbox 不隐藏或显示不流畅

标签 javascript jquery html css flexbox

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

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

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

结构:

enter image description here

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();
 });

但这一切都行不通。

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

enter image description here

演出结束后我有什么:

enter image description here

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

假设有 3 个 Action 要实现:
  • 使用类获取隐藏的 flexbox
  • 使用过渡/动画正确隐藏 flexbox
  • 使用过渡/动画正确显示 flexbox
  • 最佳答案

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

    $("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>

    关于javascript - Flexbox 不隐藏或显示不流畅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35196029/

    相关文章:

    javascript - 子div没有消失,隐藏的可见性

    javascript - axios POST请求(javascript)和Sinatra/Base API( ruby )的问题

    jquery - 在浏览器调整大小期间保持 <div> 元素位置不变

    javascript - jQueryMobile : How to start the page x pixels scrolled down?

    javascript - 选择以整个对象为值的选项

    javascript - 从xml文件获取 child 的 child

    javascript - jQuery Datetime Picker onSelect无法按预期工作

    javascript - 在计时器内进行 AJAX 调用并保持值

    html - 如何缩放高度数字微调器(输入类型=“数字”)

    php - 隐藏的 ID 列和其他显示数据的列