CODEWITHSUNDEEP
javascriptjqueryhtmlcssflexbox
Orelsanpls
Orelsanpls

Reputation: 23515

Flexbox not hiding or showing smoothly

I have a flexbox that contains 3 elements. 1 static, 1 hidden and 1 visible.

The hidden and visible elements are flexbox as well display: flex;.

What I want is to hide the visible element and show the hidden element. I have tried to use the slideDown and slideUp JQuery functions, but at the end my elements becomes display: block; and the display is messed up.

The structure:

enter image description here

The css:

.nodispitem {
    display:                    none;
}

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

The Js function I have tried:

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

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

or

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

or

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

But all of this doesn't work.

What I need to have at the end of the show event:

enter image description here

What I have after the show event:

enter image description here

I have found a way to show/hide elements properly but without the smooth effect and it's necessary!

To assume there are 3 actions to achieve:

  1. Get a flexbox hidden using a class
  2. Hide a flexbox properly using transition/animation
  3. Show a flexbox properly using transition/animation

Upvotes: 3

Views: 2898

Answers (1)

sTx
sTx

Reputation: 1221

Not sure if it's what u want but i guess it's a start...

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

Upvotes: 2

Related Questions