Question

我要求一点帮助，我已经开始为我的朋友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>

Answer 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";
});

Answer 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%";
});

我希望这可以帮助您解决问题！

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

2 个答案: