css - 控制 CCS 动画

Question

我使用纯 CSS 根据页面的视口(viewport)创建一个动态打开和关闭的侧边栏。但是我的代码有几个问题:

1. 如何在屏幕首次加载时阻止动画？也就是说，我只想在第一次加载时打开或关闭侧边栏，然后在调整视口(viewport)时设置动画。

2. 为什么我必须有两个单独的动画？请注意，我有两个相同的关键帧 toggle 和 toggle1，它们分别用于关闭和打开。如果我尝试对两个动画都使用 toggle，动画会立即发生。没有重复代码的任何解决方法？

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#sidebar {
  position: absolute;
  width: 200px;
  background-color: #123456;
  height: 100vh;
}

@media (min-width: 500px) {
  #sidebar {
    animation: toggle 200ms ease-in 1 reverse forwards;
  }
}

@media (max-width: 500px) {
  #sidebar {
    animation: toggle1 200ms ease-out 1 normal forwards;
  }
}

@keyframes toggle {
  0% {
    left: 0px;
  }
  100% {
    left: -200px;
  }
}

@keyframes toggle1 {
  from {
    left: 0px;
  }
  to {
    left: -200px;
  }
}

<div id="sidebar"></div>

Answer 1

只需使用一个简单的过渡而不是动画，以及 1 个媒体查询

#sidebar {
  position: absolute;
  width: 200px;
  background-color: #123456;
  height: 100vh;
  transition:left 500ms ease;
  left:0;
}

@media (max-width: 500px) {
  #sidebar {
    left: -200px;
  }
}

https://jsfiddle.net/ufoste1y/3/

您还可以使用 transform:translateX，它应该提供 better performance。

#sidebar {
  position: absolute;
  width: 200px;
  background-color: #123456;
  height: 100vh;
  transition:transform 500ms ease;
}

@media (max-width: 500px) {
  #sidebar {
    transform: translateX(-200px);
  }
}

https://jsfiddle.net/ufoste1y/8/