CSS Animation Sidemenu (using it as filter pane for table)

Question

Hey I struggle using CSS Animation. I use Bootstrap 4 and am very new to website developing and also to CSS. I use Animate.css for my animaton. I want the icon button to expand to the side and show the div with the select elements ( for table filtering, for which I use datatables). Here is my reproducable script: I cant figure out how to start the animation from the icon button on (I also want the select button evenly spaced and vertical centered, but the button on the right). I could only realise this with display:flex but then float-right does not work for the button.

Here is the code: I couldnt figure out how to use animate.css in jsfiddle :/ Edit: I forgot the animate method: https://jsfiddle.net/z4yvp0gL/8/

HTML:

<div>
  <div class="row button-container">
    <div class="col" style="display: flex;">
      <div id="sideExpand"><select>
          <optgroup label="This is a group">
            <option value="12" selected>This is item 1</option>
            <option value="13">This is item 2</option>
            <option value="14">This is item 3</option>
          </optgroup>
        </select><select>
          <optgroup label="This is a group">
            <option value="12" selected>This is item 1</option>
            <option value="13">This is item 2</option>
            <option value="14">This is item 3</option>
          </optgroup>
        </select><select>
          <optgroup label="This is a group">
            <option value="12" selected>This is item 1</option>
            <option value="13">This is item 2</option>
            <option value="14">This is item 3</option>
          </optgroup>
        </select></div>
      <button class="btn btn btn-transparent btn-icon" id="filterToggle" onclick="SetActiveDiv('#sideExpand',this)"><i class="fa fa-filter" style="position: absolute;font-size: 150%;"></i></button>
    </div>
  </div>
</div>

CSS

#sideExpand {
  display: none;
  width: 100%;
  border-radius: 35px;
  background-color: rgba(31, 45, 65, 0.125);
}
select {
  border: 0;
  background-color: initial;
  font-size: 100%;
  display: block;
  margin: auto;
  word-wrap: normal;
}
.btn-icon {
  padding: 0;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 100%;
  flex-shrink: 0;
  height: calc( (1rem * 1.5) + (0.5rem * 2) + (2px) ) !important;
  width: calc( (1rem * 1.5) + (0.5rem * 2) + (2px) ) !important;
}

Javascript

function SetActiveDiv(ID, bt) {
  var element = document.querySelector(ID);
  if (element !== null) {
    if (element.classList.contains("show")) {
      element.classList.remove("show");
      animateCSS(element, "fadeOutLeftBig", "2s")
      animateCSS(bt, "fadeOutLeftBig", "2s")
      return setTimeout(() => {
        element.style.display = "none";
      }, 2000);
    } else {
      element.style.display = "flex";
      element.classList.add("show");
      animateCSS(element, "fadeInLeftBig", "2s").then((message) => {});
      return animateCSS(bt, "fadeInLeftBig", "2s").then((message) => {});
    }
  }
  return console.log(ID, " not found!");
}

Answer 1

How To Add transition animation with CSS

I will briefly explain how this example works. So that perhaps you can get a better understanding or an advanced start in your learning.

There are two ways to animate using css, with a Animate property or Transition property. I use the transition property in this example because this animation is simple and also the transition animations are better for performance.

Transition: Set the property that you would like to transition, duration and an Bézier curve ( animation timing ).

The comments in the code explains in more detail what every part of the code is for.

Deme : https://jsfiddle.net/hexzero/9da0q3eh/

function SetActiveDiv(ID, bt) {
  var element = document.getElementById(ID);
  if (element) {
   element.classList.toggle("slide") // By toggling the class, 
   return true               //css attributes change that triggers the animation to start
  }
  return console.log(ID, " not found!");
}

#sideExpand {
  display:flex;
  width: 100%;
  height: calc( (1rem * 1.5) + (0.5rem * 2) + (2px) );
  border-radius: 35px;
  background-color: rgba(31, 45, 65, 0.125);
  transition: transform 1s ease-in; // Transition set which property will be animated and how
  transform: translateX(100%); // this is the initial position of the element

Note: This means that to start with the element will be 100% out of position. Towards the right side, due to the flow of the document.

  z-index: -1; // z-index determines how elements stack up on the z axis, lower values to to the bottom of the stack
}

#sideExpand.slide{  // We have to use the Id along side the class do to specificity
  transform: translateX(0%); // This is the position that will be achieved 
}

.filter-container{
  padding: .3rem;
  display: flex; 
  justify-content: flex-end;
  overflow: hidden;  // Hides the overflowing element, at the moment the filter is 100% 
} // out of position that would extent the view to the right significantly.

#filterToggle{  // I advise to never use inline style, try to add them to your style-sheets
  background: white; // fore, the use of inline styles and the !important keyword
  font-size: 150%; // has extremely high specificity values that are hard to overwrite 
  border: .2rem solid #c1c1c1;
}

#filterToggle::after{ // Add a cover to hide the filters
  position:absolute;
  content: "";
  height: calc( (1rem * 1.5) + (0.5rem * 2) + (2px) );
  width: 4rem;
  background:white;
  right: -2rem ;
  z-index: -1;
}

If you spot any inconsistencies or have any suggestions how to improve my answers please let me know. Thanks