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

Question

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

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

<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

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

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

然后显示动画再次隐藏侧边栏，因为您没有设置animation-fill-mode，应该是forwards。如果不是，则在任何动画结束时，元素将返回到您在#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;
}

Answer 2

使用css如下：

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

为什么？

如果你在#sidebar 中设置left: -100%; 在show 之后完成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 3

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

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

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

}