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

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

因此它从-100％（您在#sidebar上设置默认值）开始，转到from的{{1}}位置，然后转到0%的位置。这就是侧栏在加载时显示的原因。

然后，由于未设置应为to的{{1}}，因此show动画再次隐藏了侧边栏。如果没有，则在任何动画的结尾，元素将返回到您在animation-fill-mode上设置为forwards的默认位置。因此它再次隐藏。

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

-100%

Answer 2

按如下方式使用css：

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

为什么？

如果您在left: -100%;修饰完成后在#sidebar中设置了show，则将left重新声明为#sidebar中的声明，而不是像在{ {1}}

See working code

@keyframes

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;

}

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

3 个答案: