控制CCS动画

Question

我使用纯CSS创建一个基于页面的视图端口的动态打开和关闭侧边栏。但是，我的代码有几个问题：

1. 当屏幕第一次加载时，如何防止动画？也就是说，我只想在第一次加载时打开或关闭侧边栏，然后在调整视图端口时动画化。
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

只需使用一个简单的转换而不是动画，和一个媒体查询。

#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，它应该提供性能更好。

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

Answer 2

为了在默认情况下强制打开或关闭侧栏，不能使用原始CSS完成。您需要JavaScript等待页面完成加载，然后动态更新元素，使其具有应用CSS动画的类或类似的类。

至于重复的代码，您当然可以只使用toggle。这可能是由于您忘记将@media animation引用从toggle1更改为toggle造成的。

下面是一个示例，展示了在JavaScript的帮助下，侧边栏默认保持打开状态。动画现在只在.loaded类上触发，JavaScript在页面加载后1000毫秒将loaded类应用于元素，这意味着它将不会最初触发动画。

话虽如此，您可能还是只想在某种条件下触发幻灯片，而JavaScript更适合于这种情况:)

​

window.addEventListener("load", function() {
  setTimeout(function() {
    var sidebar = document.getElementById("sidebar");
    sidebar.classList.add("loaded");
  }, 1000);
});

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

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

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

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

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

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

​