Question

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

如何在屏幕首次加载时阻止动画？也就是说，我只想在第一次加载时打开或关闭侧边栏，然后在调整视口时进行动画处理。
为什么我必须有两个单独的动画？注意我有两个相同的关键帧toggle和toggle1，它们分别用于关闭和打开。如果我尝试仅使用toggle两个动画，则动画会立即发生。没有重复代码的任何解决方法？

＆＃13;

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

＆＃13;

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

＆＃13;

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/

Answer 2

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

对于重复的代码，您当然可以使用toggle。它不适合您，可能是因为您忘记将@media animation引用从toggle1更改为toggle。

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

话虽如此，你可能只想在某种条件下触发幻灯片，并且JavaScript会更适合这种情况：）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

控制CCS动画

2 个答案: