在组件中使用 CSS 动画显示和隐藏

Question

我创建了一个 Angular 边栏我试图用 CSS 动画显示和隐藏它 Online Example:

侧边栏组件依赖于服务来知道何时隐藏和显示：

<div id="sidebar" [ngClass]="{'hide': sidebarService.hidden, 'show': !sidebarService.hidden}">

  <button type="button" (click)="sidebarService.toggle()">
    Close Sidebar
  </button>

  <nav>
    <ul>
      <li>
        <a href="#">Page 3</a>
      </li>
      <li>
        <a href="#">Page 4</a>
      </li>
    </ul>
  </nav>

</div>

我使用的CSS如下：

@keyframes show {
  from {left: -100%;}
  to {left: 0;}
}

@keyframes hide {
  from {left: 0;}
  to {left: -100%;}
}

#sidebar {
  background-color: #e0e0e0;
  border: 1px solid red;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;   
  left: -100%;
  right: 0;
  bottom: 0;     
  width: 100%;
}

.hide {
  animation-name: hide;
  animation-duration: 1s;
}

.show {
  animation-name: show;
  animation-duration: 1s;
}

我发现了 2 个问题：

1 - 侧边栏最初显示为可见，之后立即关闭；

2 - 单击打开侧边栏时会打开，但完成后它会消失。

我不确定我在这里遗漏了什么......

Answer 1

使用css如下：

在 .hide 中设置 left: -100%; 而不是在 #sidebar

中使用

为什么？

如果您在 show 动画完成后在 #sidebar 中设置 left: -100%; left 回到 #sidebar 中的声明，而不是像您设置的那样停留在 @keyframes

See working code

#sidebar {
  background-color: #e0e0e0;
  border: 1px solid red;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;   
  right: 0;
  bottom: 0;     
  width: 100%;
}

.hide {
  animation-name: hide;
  animation-duration: 1s;
  left: -100%;
}

.show {
  animation-name: show;
  animation-duration: 1s;

}

Answer 2

问题在于您在 css 文件中定义 left: -100% 的位置。

我的建议是这样做，将 left: -100% 放在 .hide class 中，而不是直接放在容器中。

#sidebar {
  background-color: #e0e0e0;
  border: 1px solid red;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;   
  /*left: -100%;*/
  right: 0;
  bottom: 0;     
  width: 100%;

}

.hide {
  animation-name: hide;
  animation-duration: 1s;
  left:-100%;
}

.show {
  animation-name: show;
  animation-duration: 1s;

}

Answer 3

问题是您设置了关键帧动画隐藏，其中设置了 from : 0% 和 to: -100%。这意味着动画从 0 处的边栏开始。

所以它从 -100%（您在 #sidebar 上设置的默认值）开始，转到 0% 的 from 位置，然后转到 to 位置。这就是边栏在加载时出现的原因。

然后显示动画再次隐藏侧边栏，因为您没有设置animation-fill-mode应该是forwards。如果不是，则在任何动画结束时，元素 returns 将回到您在 #sidebar 上设置为 -100% 的默认位置。于是又躲起来了

（在这种情况下）您可以完全跳过动画，只使用过渡

#sidebar {
  background-color: #e0e0e0;
  border: 1px solid red;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;   
  left: -100%;
  right: 0;
  bottom: 0;     
  width: 100%;
  transition: 1s;
}

#sidebar.hide {
  left: -100%;
}

#sidebar.show {
  left: 0;
}

在组件中使用 CSS 动画显示和隐藏

Show and Hide with CSS Animation in Component

css

css-animations

angular

angular6

angular7