为什么动画没有按预期工作？答案

【问题标题】：Why are the animations not working as intended?为什么动画没有按预期工作？
【发布时间】：2018-11-07 03:01:23
【问题描述】：

我请求帮助，我已经开始为我的朋友 Micheal 编写一个网站，但遇到了一个小问题。幻灯片菜单动画无法正常工作，因为 slide() （幻灯片菜单的幻灯片）第一次工作顺利，但 returnBack() 动画工作不顺利（它可以工作但不顺利:( ) 然后幻灯片在第二次做同样的事情：做的工作，但不顺利...... 这是代码（请记住，动画是在 CSS 文件中定义的）

var hero = document.querySelector(".hero"),
    sidebar = document.querySelector(".sidebar");


document.querySelector(".menu-icon").addEventListener("click", function slide() {
    hero.style.animation = "slidehero 2s ease forwards";
    sidebar.style.animation = "slidebar 2s ease forwards";

});
document.querySelector("#Capa_1").addEventListener("click", function returnBack() {
    hero.style.animation = "slidehero 2s ease forwards reverse";
    sidebar.style.animation = "slidebar 2s ease forwards reverse";

});

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: local("Montserrat Black"), local("Montserrat-Black"), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_epG3gnD_g.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local("Montserrat Bold"), local("Montserrat-Bold"), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.container {
  background-color: #272223;
  width: 100%;
  display: flex;
  overflow: hidden; }

.super-head {
  font-family: Montserrat;
  font-weight: 900; }

.side-back {
  background-color: #a6001c; }

@keyframes slidebar {
  0% {
    left: 0%; }
  50% {
    left: -25%; }
  100% {
    left: -50%; } }
@keyframes slidehero {
  0% {
    left: 0%; }
  50% {
    left: -50%; }
  100% {
    left: -100%; } }
body {
  width: 200%;
  overflow: hidden; }

.hero {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative; }

.hero .align-head {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }

.hero .align-head .side-back {
  width: 90%;
  height: 90%;
  position: relative; }

.super-head {
  color: white;
  font-size: 150px;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  z-index: 2;
  display: inline-block; }

.menu-icon {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 6.21%;
  margin-top: 11.29%; }

[class^="rec-"] {
  display: block;
  background-color: white;
  width: 53px;
  height: 8px;
  margin: 3px; }

.menu-item {
  font-family: Montserrat;
  font-weight: 700;
  color: white;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
  display: block;
  transition: text-decoration 3s; }

.menu-item:hover {
  text-decoration: line-through; }

.sidebar {
  width: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }

.return {
  align-self: center;
  width: 50px;
  height: 50px;
  margin-bottom: 50px;
  cursor: pointer; }

#Capa_1 {
  transform: rotate(180deg);
  margin-bottom: 10%;
  cursor: pointer; }

.arrow:hover {
  fill: #a6001c; }

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="/assets/img/favicons/favicon.ico">  
  <link rel="stylesheet" href="/assets/css/main.css" />
</head>
<body>
<div class="container">
    <section class="hero">
        <!--<h1 class="super-head">Greet<br>ings.</h1>--!>

        <div class="align-head">
            <div class="side-back">
                <div class="menu-icon">
                    <div class="rec-1"></div>
                    <div class="rec-2"></div>
                    <div class="rec-3"></div>
                </div>

            </div>
        </div>
    </section>


    <div class="sidebar">
        <?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 306 306" style="enable-background:new 0 0 306 306;" xml:space="preserve">
<g>
	<g id="chevron-right">
		<polygon class="arrow" points="94.35,0 58.65,35.7 175.95,153 58.65,270.3 94.35,306 247.35,153   " fill="#ffffff"/>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

        <a class="menu-item" src="#">About me</a>
        <a class="menu-item" src="#">Skills</a>
        <a class="menu-item" src="#">Works</a>
        <a class="menu-item" src="#">Contact me</a>


    </div>
</div>

<script src="/assets/js/jquery-2.1.1.min.js"></script>
<script src="/assets/js/functions.js" type="text/javascript"></script>
<script src ="assets/js/textFit.min.js" type="text/javascript"></script>
    </body>
</html>

【问题讨论】：

我会回答您的问题，但只是未来的建议，请尝试发布仅与您所要求的内容相关的代码。你的大部分 css/html 都是无关紧要的，这会让别人更难发现问题。

标签： javascript html css css-animations

【解决方案1】：

我建议您也为“returnBack”事件添加动画。像这样的：

@keyframes slidebarback {
  0% {
    left: -50%; }
  50% {
    left: -25%; }
  100% {
    left: 0%; } 
}

@keyframes slideheroback {
  0% {
    left: -100%; }
  50% {
    left: -50%; }
  100% {
    left: 0%; } 
}

document.querySelector(".menu-icon").addEventListener("click", function slide() {
    hero.style.animation = "slidehero 2s ease forwards";
    sidebar.style.animation = "slidebar 2s ease forwards";

});

document.querySelector("#Capa_1").addEventListener("click", function returnBack() {
    hero.style.animation = "slideheroback 2s ease forwards";
    sidebar.style.animation = "slidebarback 2s ease forwards";
});

【讨论】：

【解决方案2】：

简要浏览您的代码我没有发现任何错误，但您的问题可能有多种原因。

如果不知道您测试过哪些浏览器以及您的系统规格，就很难准确找出问题所在。但是，如果我不得不猜测，我认为可能有两件事在起作用。

首先，有时浏览器需要一些帮助来处理 CSS 动画。 materialize 等流行的 UI 库使用名为“will-change”的 CSS 属性。该属性基本上告诉浏览器该属性将很快发生变化，并让浏览器有时间准备。

其次，一些浏览器仍然难以正确使用新功能。有关这方面的更多详细信息，您可以查看我给 here 的这个答案。

如果使用“will-change:transition”属性不能解决您的问题，接下来我会尝试从您的 css 代码中删除关键帧，并改用 animate 属性。

基本上看起来像这样：

CSS：

.hero{transition: all 2s; transition-timing-function: ease;}
.sidebar{transition: all 2s; transition-timing-function: ease;}

那么您的 javascript 将如下所示：

document.querySelector(".menu-icon").addEventListener("click", function slide() {
    hero.style.left = "-50%";
    sidebar.style.left = "-100%";
});

希望能帮到你解决问题！

【讨论】：

你的回答加上法比奥的回答帮助我弄清楚了，但遗憾的是他的回答完成了 75% 的事情，所以我希望我可以标记你的回答，但这不公平，我真的很感谢你努力和冗长的回答，我向像你一样让互联网变得更好的人表示敬意！