Spinning menu button HTML/CSS/JS-CodePudding

I tried making a spinning menu button for a website. I want it to spin and change its content when clicked, then turn back when it's clicked again

Here is my code :

//Shops

const shopButtons = document.querySelector('.shopButtons')

//Shop animation on click

shopButtons.addEventListener('click', () => shopButtons.classList.toggle('openMenu'));

.shopButtons {
  background-color: blue;
  border: 3px solid black;
  border-radius: 40px;
  position: fixed;
  bottom: 15px;
  left: 15px;
  width: 80px;
  height: 80px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  transition: .75s;
  transform: rotate(-359deg);
}

.shopButtons.openMenu {
  background-color: rgb(0, 0, 120);
}

.shopButtons::after {
  content: '\1F6D2';
  color: white;
  font-size: 3em;
  transition: background-color .75s;
  margin: auto;
  border-radius: inherit;
}

.openMenu {
  transition: .75s;
  transform: rotate(0deg);
}

.openMenu::after {
  background-color: rgb(0, 0, 120);
  color: white;
  content: '\00D7';
  font-size: 50px;
}

<html lang="en">

<head>
  <link rel="stylesheet" href="../css/style.css">
  <title>Website</title>
</head>

<body>
  <button  id="mainShop"></button>

  <script src="../scripts/script.js"></script>
</body>

</html>

I think it works pretty well (not sure if the code is optimized though), but I am struggling to make it so the shopping cart icon only appears when the button isn't rotating.

As of right now it works when the menu is opened, but on exit, the shopping cart appears before the rotation animation is over

Is there a simple way to do this ?

I have tried delaying the rotation animation, but this only lead to a very slow animation. I also tried delaying the image change using JavaScript, but it wasn't functional.

CodePudding user response：

What is happening is that you are rotating the entire button, rather than the icons. So the shopping cart will always spin.

What I did here is removed the transformation from the .shopButtons button. Then added a 360deg rotation to just the .openMenu button.

Maybe this is an easy solution for you.

//Shops

const shopButtons = document.querySelector('.shopButtons')

//Shop animation on click

shopButtons.addEventListener('click', () => shopButtons.classList.toggle('openMenu'));

.shopButtons {
  background-color: blue;
  border: 3px solid black;
  border-radius: 40px;
  position: fixed;
  bottom: 15px;
  left: 15px;
  width: 80px;
  height: 80px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.shopButtons.openMenu {
  background-color: rgb(0, 0, 120);
}

.shopButtons::after {
  content: '\1F6D2';
  color: white;
  font-size: 3em;
  transition: background-color .75s;
  margin: auto;
  border-radius: inherit;
}

.openMenu {
  transition: .75s;
  transform: rotate(360deg);
}

.openMenu::after {
  background-color: rgb(0, 0, 120);
  color: white;
  content: '\00D7';
  font-size: 50px;
}

<html lang="en">

<head>
  <link rel="stylesheet" href="../css/style.css">
  <title>Website</title>
</head>

<body>
  <button  id="mainShop"></button>

  <script src="../scripts/script.js"></script>
</body>

</html>

CodePudding user response：

Only thing I can think of is to add a class when a transition starts and use the transitionend event to remove it when the animation is done. With this class, you can be precise when the image should change:

const shopButtons = document.querySelector('.shopButtons')

shopButtons.addEventListener('click', () => {
  shopButtons.classList.toggle('openMenu')
  shopButtons.classList.add('transitioning')
});

shopButtons.addEventListener('transitionend', (event) => {
  event.target.classList.remove('transitioning')
});

.shopButtons:not(.openMenu):not(.transitioning)::after{
  content: '\1F6D2';
  color: white;
  font-size: 3em;
}


.openMenu::after,.shopButtons.transitioning::after {
  background-color: rgb(0, 0, 120);
  color: white;
  content: '\00D7';
  font-size: 50px;
}

/*       */


.shopButtons {
  background-color: blue;
  border: 3px solid black;
  border-radius: 40px;
  position: fixed;
  top: 15px;
  left: 15px;
  width: 80px;
  height: 80px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  transition: .75s;
  transform: rotate(-359deg);
}

.shopButtons.openMenu {
  background-color: rgb(0, 0, 120);
}


.shopButtons::after {
  transition: background-color .75s;
  margin: auto;
  border-radius: inherit;
}

.openMenu {
  transition: .75s;
  transform: rotate(0deg);
}

<html lang="en">

<head>
  <link rel="stylesheet" href="../css/style.css">
  <title>Website</title>
</head>

<body>
  <button  id="mainShop"></button>

  <script src="../scripts/script.js"></script>
</body>

</html>