Hi there, I'm having some trouble with CSS Animation. I recently started developing websites and am using Bootstrap 4 along with Animate.css for animations. My goal is to have an icon button expand sideways to reveal a div containing select elements for table filtering (I am using datatables for this). However, I can't seem to figure out how to trigger the animation from the icon button itself. I also want the select buttons to be evenly spaced and vertically centered, with the button on the right side. I tried using display:flex for this layout, but float-right doesn't work as expected.
Unfortunately, I couldn't get Animate.css to work properly in my jsfiddle example. Here's the link: 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!");
}