我要求一点帮助，我已经开始为我的朋友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>
答案 0 :(得分：0)
我建议您为“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";
});
答案 1 :(得分：0)
简要浏览代码我没有看到任何错误，但可能有多种原因导致您的问题。
如果不知道您测试的浏览器和系统规格，很难找出确切的错误。但是，如果我不得不猜测，我认为有两件事情可以发挥作用。
首先，有时浏览器需要一些处理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%";
});
我希望这可以帮助您解决问题！