The menu button is experiencing issues with the CSS animation not properly functioning

Below is the JavaScript code that I am using:

function toggleAnimation(x) {
      if(!document.querySelector(".animate")){
      x.classList.add("animate");
      x.classList.remove("animater");
      }else{
      x.classList.remove("animate");
      x.classList.add("animater");
    }

The animation works fine on the first click, but subsequent clicks only show the end state without any animation. The "animater" class consists of three classes, all functioning properly. The

element correctly passes information to the function.

Here is the complete code snippet:

function toggleAnimation(x) {
  if (!document.querySelector(".animate")) {
    x.classList.add("animate");
    x.classList.remove("animater");
  } else {
    x.classList.remove("animate");
    x.classList.add("animater");
  }
}
body {
  background: #3FAF82;
  text-align: center;
}

.line1,
.line2,
.line3 {
  margin: 0px auto;
  margin-top: 10px;
  height: 5px;
  width: 80px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  transition: all ease 0.8s;
}

.lines {
  margin-top: 50px;
  cursor: pointer;
}

.animate .line3 {
  animation: change3 ease 1 0.8s forwards;
}

.animater .line3 {
  animation: change3 ease 1 0.8s forwards reverse;
}

.animate .line1 {
  animation: change1 ease 1 0.8s forwards;
}

.animater .line1 {
  animation: change1 ease 1 0.8s reverse forwards;
}

.animate .line2 {
  width: 0px;
}

.animater .line2 {
  width: 80px;
}

@keyframes change3 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -15px, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0, -15px, 0) rotate(-45deg);
  }
}

@keyframes change1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(0);
    transform: translate3d(0, 15px, 0) rotate(0);
  }
  100% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(45deg);
    transform: translate3d(0, 15px, 0) rotate(45deg);
  }
}



<div class="lines" onclick="toggleAnimation(this)">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

javascripthtmlcsscss-animations

Answer №1

The main issue that needs to be addressed is the repetitive use of the same animation. By simply toggling classes to change properties, the animation itself remains constant and does not reset. To resolve this issue, it is recommended to introduce two distinct animations.

A simpler approach would be to utilize transitions instead of complex animations:

function toggleAnimation(x) {
  x.classList.toggle("animate");
}
body {
  background: #3FAF82;
  text-align: center;
}

.line1,
.line2,
.line3 {
  position: relative;
  margin: 0px auto;
  margin-top: 10px;
  height: 5px;
  width: 80px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  transition: width linear 0.8s, top 0.5s linear 0.5s, bottom 0.5s linear 0.5s, transform 0.5s linear;
}

.line1 {
  top: 0;
}

.line3 {
  bottom: 0;
}

.lines {
  margin-top: 50px;
  cursor: pointer;
}

.animate .line1,
.animate .line2,
.animate .line3 {
  transition: width linear 0.8s, top 0.5s linear, bottom 0.5s linear, transform 0.5s linear 0.5s;
}

.animate .line3 {
  bottom: 15px;
  transform: rotate(-45deg);
}

.animate .line1 {
  top: 15px;
  transform: rotate(45deg);
}

.animate .line2 {
  width: 0px;
}

.animater .line2 {
  width: 80px;
}
<div class="lines" onclick="toggleAnimation(this)">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

Answer №2

The animater class contained CSS properties that were causing issues with the animation process.

I decided to remove the lines of code that applied and removed the animater class, as it seemed unnecessary for your code.

You can find the updated version on CodePen: https://codepen.io/anon/pen/wmqYpg

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The dynamic addition of the active class is malfunctioning

I have dynamically added a class using AngularJS, but it seems to not be functioning correctly. As I am new to AngularJS, I would appreciate any suggestions to resolve this issue. Below is my HTML code: <div class="col-md-15 col-sm-3" ng-repeat="data i ...

jqueryhtmlcssangularjs

The document does not contain any serialized JavaScript files

Hey there, I'm facing an issue with my Codeigniter and JavaScript file upload and insertion into the database. I'm not getting any response, so could you please take a look at my code and share some valuable ideas? Below are the codes for the vie ...

javascriptjqueryajaxcodeigniter

Retrieve the DIV id based on the given coordinates

For example, I have the following code that showcases 3 div boxes per row across multiple rows on my webpage: <div id='row1col1' class='duty' style="top:50px ; left:50px " ></div> <div id='row1col2' ...

jquerycss

Updating ng-model upon paste command in Safari browser encountering issues

When typing text character by character into a search textbox, everything works fine. However, when pasting data directly into the textbox, the ng-model does not get updated. This issue only occurs in the safari browser. Here is the HTML code: <div cl ...

javascriptangularjs

Discovering and swapping values within nested objects

I've encountered a challenge that I need help with: In my nested object, I receive a response from the server containing an object with updated values. My goal is to locate this object within my nested structure and replace it. The structure of my o ...

javascriptangularjsobjectmultidimensional-array

Incorporating a weather widget into the information window of a Google map

I am having some trouble trying to integrate a weather widget from into an Info Window on a Google map. The goal is to have the weather widget open in the Info Window when a marker on the map is clicked. The code snippet for embedding the weather widget ...

javascripthtmlgoogle-mapswidgetinfowindow

What is the best way to add content to a box once it has been hovered over?

Looking to create a sticky note-style design, but struggling with displaying the content inside the box only when hovered. In my code example below, can you help me achieve this effect? body { margin: 45px; } .box { display:inline-block; backgrou ...

javascriptjqueryhtmlcss

The styling of section and small elements appears differently in Internet Explorer compared to Chrome

I am working on an HTML code to showcase a list of individuals, including their names and statuses. <section class="box-time"> <ul class="group"> <li> <a class="fancybox fancybox.ajax" href="../loadFancybox.php ...

htmlcssgoogle-chromeinternet-explorer

Access the second DIV using JavaScript's getElementById method

What could be preventing me from displaying a Google map in the second DIV ID? I attempted changing my Map_canvas to Class with the same results. I am aiming to showcase a Google map in the second Div, map_canvas. The map functions within my jQueryMobile s ...

javascriptmaps

Hold on while utilizing Path (Puppeteer)

My current setup involves using Puppeteer 22.6.0 with NodeJS for web scraping purposes. I am facing a challenge where I need to pause the script until a specific h1 element becomes visible on the page. The tricky part is that there are multiple h1 elements ...

javascriptnode.jsweb-scrapingxpathpuppeteer

Is JSDOM capable of configuring exuberant ctags for a project setup?

Anticipating great javascript ctags support got me considering the possibility of using a project like to configure ctags for optimum vim usage. ...

javascriptvimexuberant-ctagszombie.jsjsdom

Simple Selection Panel

Looking to include a simple dropdown menu with 5 choices. Once a selection is made, an answer corresponding to that choice will appear in another field next to it. For example: Choosing France from the dropdown would display 'Paris' in the adjac ...

htmlcsstextboxdropdowntextfield

Managing several drop elements using class dynamically

I am facing a challenge in combining drag and drop listeners into one function to create dynamic zones with the same class. This will allow me to call a single function for uploading files. The upload function is currently working correctly, but I need a ...

javascript

Page will break once it is filled vertically

My webpage is filled with Bootstrap 4 cards lined up in a row. I am looking to add a line break when the vertical scroll bar appears. How can I achieve this? Snippet: <?php //THIS FILE BELONGS TO CROPSATH, LICENSED UNDER GPLv3. //CREATED BY MORICZGER ...

htmlcsstwitter-bootstrap-4

The functionality of Bootstrap 4's sticky-top for the navigation bar has suddenly ceased

Recently, I encountered an issue with my navigation bar that was set to stick to the top while scrolling. Everything was working perfectly until I decided to move the login button to the right side. Despite numerous attempts to modify the position of the l ...

htmlcssbootstrap-4navbar

Webpack 2 and Babel seem to be having trouble converting the code to ES2015

I've recently put together a sample project using webpack and started incorporating babel. Despite trying out various configurations from different sources, I'm still encountering issues with getting it to work properly. Below is my webpack.conf ...

javascriptnpmbabeljswebpack-2

The fillOpacity and opacity properties appear to be malfunctioning

Note: While I understand that image masking can solve my issue, I prefer not to use it as it would require me to use my image as a background and could present accessibility challenges. I am specifically looking for solutions involving clip-path. Issue: T ...

htmlcssimagesvgstyling

Encountering difficulties in retrieving the JSON data from the web service

My external web service contains JSON data which has been validated using the JSON Validator website. However, I am facing an issue where the success function in the code below is not running at all. The web service necessitates that the email and password ...

javascriptjqueryjsonajax

Unable to display image using jQuery load() function on an HTML page

I have implemented the following code snippet to load an HTML page within a div: $("#htmlViewer").load("conversion_test/to_convert_3264/"+getPageName(pageCount)+".htm", function(response, status, xhr) { if (status == "error") { ...

jqueryhtmlajaxload

What if we started using PT as the standard unit for measuring fonts and element size?

Currently, I am in the process of creating a mobile app that will work across different platforms using jQueryMobile and PhoneGap. My initial focus is on developing for Android. When it comes to Android app development, it is recommended that developers u ...

androidcssjquery-mobilefont-size