Почему анимация не работает должным образом?

Я прошу небольшого одолжения, я начал кодировать веб-сайт для моего друга Майкла и столкнулся с небольшой проблемой. Анимация слайд-меню не работает должным образом, так как 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 не имеет отношения к делу, и кому-то становится труднее обнаружить проблему.

— 28.05.2018 17:41

javascript html css css-animations

28.05.2018 15:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я предлагаю вам добавить анимацию также для вашего события 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";
});

28.05.2018 17:51

Бегло просматривая ваш код, я не вижу ошибок, но у вашей проблемы может быть ряд причин.

Трудно выяснить, что именно не так, не зная, какие браузеры вы тестировали, и не зная характеристик вашей системы. Однако, если бы мне пришлось угадывать, я думаю, что в игру могли бы сыграть две вещи.

Во-первых, иногда браузерам нужна небольшая помощь в работе с CSS-анимацией. Популярные библиотеки пользовательского интерфейса, такие как материализоваться, используют свойство css под названием «изменится». Это свойство в основном сообщает браузеру, что скоро в этом свойстве будут внесены изменения, и дает браузеру время для подготовки.

Во-вторых, некоторым браузерам все еще трудно правильно использовать новые функции. Для получения дополнительной информации об этом вы можете проверить этот ответ, который я дал здесь.

Если использование свойства «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% вещей, поэтому я хотел бы отметить ваш ответ, но это было бы нечестно, я очень ценю ваши усилия и длинный ответ, и я плачу свои с уважением относится к таким же людям, как вы, которые делают Интернет лучше!

— 29.05.2018 01:27

28.05.2018 18:05