title: Flexbox not hiding or showing smoothly
body: <p>I have a flexbox that contains 3 elements. 1 static, 1 hidden and 1 visible. </p>
  
  <p>The hidden and visible elements are flexbox as well <code>display: flex;</code>.</p>
  
  <p>What I want is to hide the visible element and show the hidden element. I have tried to use the <code>slideDown</code> and <code>slideUp</code> JQuery functions, but at the end my elements becomes <code>display: block;</code> and the display is messed up.</p>
  
  <p>The structure:</p>
  
  <p><a href="https://i.stack.imgur.com/3JwKU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3JwKU.png" alt="enter image description here"></a></p>
  
  <p>The css:</p>
  
  <pre><code>.nodispitem {
      display:                    none;
  }
  
  .genericNestedBloc__class {
      height:                         auto;
      width:                          auto;
      display:                        inline-flex;
      justify-content:                center;
      align-items:                    center;
      align-self:                     stretch;
  }
  </code></pre>
  
  <p>The Js function I have tried:</p>
  
  <pre><code>$(selector).css("display", "flex").hide().slideDown(speed, function () {
       callback();
  });
  
  $(selector).slideUp(speed, function () {
       callback();
  });
  </code></pre>
  
  <p>or</p>
  
  <pre><code>$(selector).slideDown(speed, function () {
       callback();
  });
  </code></pre>
  
  <p>or</p>
  
  <pre><code> $(selector).slideUp(speed, function () {
        $(selector).css("display", "flex");
        callback();
   });
  </code></pre>
  
  <p>But all of this doesn't work.</p>
  
  <p>What I need to have at the end of the show event:</p>
  
  <p><a href="https://i.stack.imgur.com/dUrPR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dUrPR.png" alt="enter image description here"></a> </p>
  
  <p>What I have after the show event:</p>
  
  <p><a href="https://i.stack.imgur.com/pzLpp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pzLpp.png" alt="enter image description here"></a></p>
  
  <p>I have found a way to show/hide elements properly but without the smooth effect and it's necessary!</p>
  
  <p>To assume there are 3 actions to achieve:</p>
  
  <ol>
  <li>Get a flexbox hidden using a class</li>
  <li>Hide a flexbox properly using transition/animation</li>
  <li>Show a flexbox properly using transition/animation</li>
  </ol>