javascript 旋转菜单按钮HTML/CSS/JS

s3fp2yjn 于 2023-02-07 发布在 Java

关注(0)|答案(2)|浏览(250)

我尝试为网站制作一个旋转菜单按钮。我希望它在单击时旋转并更改其内容，然后在再次单击时返回
下面是我的代码：

//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 class="shopButtons" id="mainShop"></button>

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

</html>

我认为它工作得很好（不确定代码是否经过优化），但我正在努力使它只在按钮不旋转时显示购物车图标。
到目前为止，它在菜单打开时工作，但在退出时，购物车在旋转动画结束之前出现
有没有简单的方法可以做到这一点？
我试过延迟旋转动画，但这只会导致动画非常慢。我也试过使用JavaScript延迟图像变化，但它不起作用。

JavaScript

来源：https://stackoverflow.com/questions/75355328/spinning-menu-button-html-css-js

2条答案

按热度按时间

q5lcpyga1#

现在的情况是你旋转的是整个按钮，而不是图标。所以购物车会一直旋转。
我在这里做的是从.shopButtons按钮中移除变换。然后只在.openMenu按钮中添加360度旋转。
也许这对你来说是个简单的解决办法。

//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 class="shopButtons" id="mainShop"></button>

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

</html>

赞(0）回复(0）举报 2023-02-07

mec1mxoz2#

我唯一能想到的就是在过渡开始时添加一个类，并在动画完成时使用transitionend事件删除它。使用这个类，您可以精确地确定图像何时应该更改：

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 class="shopButtons" id="mainShop"></button>

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

</html>

赞(0）回复(0）举报 2023-02-07

我来回答

javascript 旋转菜单按钮HTML/CSS/JS

2条答案

相关问题

热门标签

最新问答