javascript - CSS Animation Sidemenu(将其用作表格的筛选器 Pane )

Question

嘿，我很难使用 CSS 动画。我使用 Bootstrap 4，对网站开发和 CSS 都很陌生。我将 Animate.css 用于我的动画。我希望图标按钮扩展到一侧并显示带有选择元素的 div(用于表过滤，我使用数据表)。这是我的可重现脚本:我无法弄清楚如何从图标按钮开始动画(我还希望选择按钮间隔均匀且垂直居中，但右侧的按钮)。我只能通过 display:flex 实现这一点，但是 float-right 对按钮不起作用。

这是代码:我不知道如何在 jsfiddle 中使用 animate.css:/编辑:我忘记了动画方法: 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

如何使用 CSS 添加过渡动画

我将简要解释这个例子是如何工作的。这样或许您可以在学习中获得更好的理解或提前开始。

有两种方法可以使用 css 制作动画，使用 Animate 属性或 Transition 属性。我在这个例子中使用了 transition 属性，因为这个动画很简单，而且过渡动画的性能更好。

过渡:设置您想要过渡的属性、持续时间和贝塞尔曲线(动画时间)。

代码中的注释更详细地解释了代码每一部分的用途。

德姆: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

注意:这意味着开始的元素会100%错位。由于文档的流向，朝向右侧。

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

如果您发现任何不一致之处或对如何改进我的答案有任何建议，请告诉我。谢谢