CSS动画侧边栏（将其用作表格的筛选窗格）

Question

嘿，我在使用CSS动画方面遇到了困难。我正在使用Bootstrap 4，对网站开发和CSS都非常新手。我使用Animate.css进行我的动画制作。我希望图标按钮能够向侧边展开并显示包含选择元素的div（用于表格过滤，我使用datatables）。

这是我的可复制脚本：我不知道如何从图标按钮开始启动动画（我还想让选择按钮均匀间隔且垂直居中，但位于右侧）。我只能通过使用display:flex来实现这一点，但然后float-right无法为按钮工作。

以下是代码：我无法在jsfiddle中使用animate.css :/ 编辑：我忘记了animate方法： 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!");
}

- Kevin Kumar

---

你觉得我回答了你的问题还是需要进一步阐述？ - Maxwell Archer

Answer 1

如何使用CSS添加过渡动画

我将简要解释一下这个例子是如何工作的，这样你或许可以更好地理解或在学习中获得进阶的起点。

使用CSS进行动画有两种方法，一种是使用Animate属性，另一种是使用Transition属性。在这个例子中，我使用了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;
}

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

- Maxwell Archer

---

+1 谢谢，这已经帮了我很多。 这是更新后的 fiddle 动画链接： https://jsfiddle.net/g8bp6ejh/ 我想现在我的问题更容易理解了 :) - Kevin Kumar

@KevinKumar 很高兴我能帮到你 =) - Maxwell Archer

Answer 2

你可以简单地使用CSS动画：

更新：按钮固定在左侧。

function SetActiveDiv() {
  var element = document.getElementById("sideExpand");
  element.classList.toggle("show");
}

#sideExpand {
  display: flex;
  width: 100%;
  border-radius: 35px;
  padding: 10px 10px 10px 48px;
  justify-content: space-between;
  transition: transform .3s ease;
  transform: translateX(-105%);
  background-color: rgba(31, 45, 65, 0.125);
}

#sideExpand.show {
  transform: translateX(0) !important;
}

#sideExpand select {
  border: 0;
  background-color: initial;
  font-size: 100%;
  word-wrap: normal;
}

.btn-icon {
  padding: 0;
  outline: none;
  cursor: pointer;
      position: fixed;
    left: 6px;
    top: 6px;
  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;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<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()"><i class="fa fa-filter" style="position: absolute;font-size: 150%;"></i></button>
    </div>
  </div>
</div>

- MajiD

---

基本上这就是我想要的（只是按钮保持在右侧，div扩展）。我认为使用animation.css会更容易理解（因为动画已经制作好了，而我很新手）。您能否解释一下它的工作原理或者提供一些资源？我很想了解这个 :) 谢谢！ - Kevin Kumar