为什么动画不能按预期工作？
为什么动画不能按预期工作？
提问于 2018-05-28 21:35:16
我在请求一个小小的帮助，我已经开始为我的朋友Micheal编写一个网站，并且刚刚遇到了一个小问题。幻灯片菜单动画不能正常工作，因为幻灯片()(幻灯片菜单的幻灯片)第一次工作顺利，但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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-28 23:51:03
我建议你也为你的"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";
});Stack Overflow用户
发布于 2018-05-29 00:05:12
简单浏览一下您的代码，我没有看到任何错误，但您的问题可能有许多原因。
如果不知道你测试过的浏览器和你的系统规格，就很难找出到底出了什么问题。然而，如果我不得不猜测，我认为有两件事可能在起作用。
首先，有时浏览器需要一些处理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%";
});我希望这能帮助你解决你的问题！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50567701
复制相关文章
相似问题