What could be causing the lack of animation in W3schools icons?

I've followed the steps provided and even attempted to copy and paste them. However, I'm experiencing an issue where the animation doesn't fully execute. Instead of the bars turning into an X shape, they reset halfway through the animation.

Any suggestions on what might be causing this? I have included the code snippet below.

      function myFunction(x) {
        x.classList.toggle("change");
      }
        .menu-container {
      display: inline-block;
      cursor: pointer;
    }
    
    .bar1, .bar2, .bar3 {
      width: 35px;
      height: 5px;
      background-color: #fff;
      margin: 6px 0;
      transition: 0.4s;
    }
    
    .change .bar1 {
      -webkit-transform: rotate(-45deg) translate(-9px, 6px);
      transform: rotate(-45deg) translate(-9px, 6px);
    }
    
    .change .bar2 {opacity: 0;}
    
    .change .bar3 {
      -webkit-transform: rotate(45deg) translate(-8px, -8px);
      transform: rotate(45deg) translate(-8px, -8px);
    }
HTML

    <div class="menu-container" onClick="myFunction(this)">
                  <div class="bar1"></div>
                  <div class="bar2"></div>
                  <div class="bar3"></div>
                </div>

javascripthtmlcss

Answer №1

Revise the translate property for the selector .bar1 in the provided code snippet.

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-10px, 6px);
  transform: rotate(-45deg) translate(-10px, 6px);
}


function updateIcon(x) {
    x.classList.toggle("change");
  }
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-10px, 6px);
  transform: rotate(-45deg) translate(-10px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -7px);
}
<p>Click on the Menu Icon to change it to an "X":</p>
<div class="container" onclick="updateIcon(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

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

What could be causing my Vue code to behave differently than anticipated?

There are a pair of components within the div. When both components are rendered together, clicking the button switches properly. However, when only one component is rendered, the switch behaves abnormally. Below is the code snippet: Base.vue <templa ...

javascripttypescriptvue.js

Menu options arranged vertically, revealing submenus that fly out upon mouse hover

I am attempting to develop a vertical menu with flyouts, which includes sub-menus. Can you point out any issues in the code provided below? <html> <head> <title>Untitled Document</title> <style type="text/css ...

htmlcsssubmenu

Exploring the Differences Between NPM Jquery on the Client Side and Server

I'm still getting the hang of node and npm, so this question is more theoretical in nature. Recently, I decided to incorporate jQuery into my website by running npm install jquery, which placed a node_modules directory in my webpage's root along ...

javascriptjquerynpm

The dark mode class in Next.js/React does not take effect until a local change is made

I've been diving into a helpful tutorial on implementing dark mode toggle in my project. The tutorial uses react-toggle and can be found here. Everything seems to be working fine except for one issue that arises on the initial page load. When the bro ...

htmlcssreactjsnext.js

What is the best way to display the most recent data from a sqlite database and incorporate animations for a more engaging

Hi there! I'm looking to retrieve data from an SQLite database and display only the latest entry. Additionally, I'd like to create an animation where scrolling reveals one entry at a time. I would greatly appreciate any assistance with this. Pl ...

phphtmldatabasesqlitepdo

Deleting the Last Node in a Linked List

My current project involves creating a function that removes the last node of a given list passed in as an argument. The function itself is relatively simple and is shown below. function popBack(list) { var current = list.head, previous; ...

javascriptlinked-list

My Angular custom libraries are having issues with the typing paths. Can anyone help me troubleshoot what I might be doing

After successfully creating my first custom Angular library using ng-packagr, I encountered an issue where the built library contained relative paths specific to my local machine. This posed a problem as these paths would not work for anyone else trying to ...

javascriptangularfrontendng-packagr

The damping effect in three.js OrbitControls only activates when the mouse is pressed, however there is no damping effect once the

I find it difficult to articulate: Currently, I am utilizing OrbitControls in three.js and have activated damping for a smoother rotation with the mouse. It is somewhat effective but not entirely seamless. When I click and drag, the damping feature works ...

javascriptthree.jsmousemousewheelorbitcontrols

The functionality of AngularJS ng-click is disrupted by the presence of {{$index}}

Having an issue with AngularJS where using $index breaks the ng-click function. This issue arises within a div utilizing ng-repeat, the repeat code is functioning correctly... <a class="accordion-toggle" data-toggle="collapse" data-parent="#acc{{$inde ...

javascriptjqueryangularjstwitter-bootstrap

Customizing the appearance and dimensions of JWPlayer Audio Player with percentage-based styling

I'm currently attempting to set up an audio embed using JWPlayer, following the instructions provided in this particular article. The article suggests setting it up with the following code: <div id="myElement">Loading the player...</div> ...

javascriptjqueryhtmlaudiojwplayer

What could be causing the res.sendfile() method to fail when invoked through a jQuery ajax call?

Problem: The first ajax call in the main.js is functioning correctly, but there seems to be an issue with the second one. Although it appears to be working initially, I suspect that there may be a bug present. Upon clicking the button, I am able to access ...

javascriptajax

Utilize Flexbox to position a group of items in the center of the page, while placing a single item at the bottom for added emphasis

I have utilized Bootstrap 4 along with some custom CSS to create a hero section where all items are centered both horizontally and vertically. The only exception is one item that I want to align at the bottom of the page while still keeping it centered ho ...

cssflexboxbootstrap-4

Is data shared globally for each HTTP/Session request?

QUERY: Is there a method to establish a variable storage specific to each session or HTTP request? The variable should be accessible globally within that session/request/connection, without the need to pass it between functions. For instance (as an examp ...

javascriptnode.jsexpressrequestglobal

Angular displaying undefined for service

I have created a service for uploading images to a server, and I am encountering an issue when calling this service from my controller. The error message indicates that the function 'uploadFileToUrl' is undefined. Below is the code for my servic ...

javascriptangularjsangular-services

What is the method to disable response validation for image endpoints in Swagger API?

I'm working with a Swagger YAML function that looks like this: /acitem/image: x-swagger-router-controller: image_send get: description: Returns 'image' to the caller operationId: imageSend parameters: ...

javascriptnode.jsswaggerswagger-uiswagger-editor

The initial menu option stands out due to its unique appearance, created using the :first-child

I am currently designing a website menu and I would like the .current-menu-item - current item, to have a different appearance. However, I want the first item in this menu to have rounded corners (top left, bottom left). How can I achieve this using the :f ...

htmlcsscss-selectors

Adjust size of item within grid component in VueJS

I have a grid container with cells and a draggable item in a Vue project. I am trying to figure out how to resize the box inside the grid component (refer to images). https://i.stack.imgur.com/q4MKZ.png This is my current grid setup, and I would like the ...

javascripthtmlcssvue.jsgrid

Transferring information between two tables in a MongoDb database

My current database in mongo is named "sell" and it contains two tables: "Car" and "Order". In the "Car" table, there is an attribute called "price". When I run the following command in the mongo shell: db.Order.aggregate([ { $lookup: { from: ...

javascriptnode.jsdatabasemongodbsails.js

When trying to access the DOM from another module in nwjs, it appears to be empty

When working with modules in my nwjs application that utilize document, it appears that they are unable to access the DOM of the main page correctly. Below is a simple test demonstrating this issue. The following files are involved: package.json ... "ma ...

javascripttypescriptnode-webkitnwjs

Is there a way in jQuery to identify if a paragraph contains exactly one hyperlink and no other content?

I need to assign the 'solo' class to a link within a paragraph only if that link is the sole element in the paragraph. This example would have the 'solo' class: <p><a>I am alone</a></p> However, this example w ...

javascriptjquery