2023年2月6日 04:33:35go评论65阅读模式

英文:

Spinning menu button HTML/CSS/JS

问题

以下是您要翻译的代码部分：

我尝试为网站创建一个旋转菜单按钮。我希望它在单击时旋转并更改内容，然后在再次单击时恢复

这是我的代码：

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    //Shops

    const shopButtons = document.querySelector(&#39;.shopButtons&#39;)

    //Shop animation on click

    shopButtons.addEventListener(&#39;click&#39;, () =&gt; shopButtons.classList.toggle(&#39;openMenu&#39;));

&lt;!-- language: lang-css --&gt;

    .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: &#39;F6D2&#39;
      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: &#39;我尝试为网站创建一个旋转菜单按钮。我希望它在单击时旋转并更改内容，然后在再次单击时恢复

这是我的代码：

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    //Shops

    const shopButtons = document.querySelector(&#39;.shopButtons&#39;)

    //Shop animation on click

    shopButtons.addEventListener(&#39;click&#39;, () =&gt; shopButtons.classList.toggle(&#39;openMenu&#39;));

&lt;!-- language: lang-css --&gt;

    .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: &#39;\1F6D2&#39;
      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: &#39;\00D7&#39;
      font-size: 50px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;html lang=&quot;en&quot;&gt;

    &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;../css/style.css&quot;&gt;
      &lt;title&gt;Website&lt;/title&gt;
    &lt;/head&gt;

    &lt;body&gt;
      &lt;button class=&quot;shopButtons&quot; id=&quot;mainShop&quot;&gt;&lt;/button&gt;

      &lt;script src=&quot;../scripts/script.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;

    &lt;/html&gt;

&lt;!-- end snippet --&gt;
D7&#39;
      font-size: 50px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;html lang=&quot;en&quot;&gt;

    &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;../css/style.css&quot;&gt;
      &lt;title&gt;Website&lt;/title&gt;
    &lt;/head&gt;

    &lt;body&gt;
      &lt;button class=&quot;shopButtons&quot; id=&quot;mainShop&quot;&gt;&lt;/button&gt;

      &lt;script src=&quot;../scripts/script.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;

    &lt;/html&gt;

&lt;!-- end snippet --&gt;

希望这对您有所帮助，如果您有其他问题，请随时提出。

英文:

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(&#39;.shopButtons&#39;)

//Shop animation on click

shopButtons.addEventListener(&#39;click&#39;, () =&gt; shopButtons.classList.toggle(&#39;openMenu&#39;));

.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: &#39;F6D2&#39;;
  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: &#39;.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: &#39;\1F6D2&#39;;
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: &#39;\00D7&#39;;
font-size: 50px;
}
D7&#39;;
  font-size: 50px;
}

&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;../css/style.css&quot;&gt;
  &lt;title&gt;Website&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;button class=&quot;shopButtons&quot; id=&quot;mainShop&quot;&gt;&lt;/button&gt;

  &lt;script src=&quot;../scripts/script.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;

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.

答案1

得分: 0

发生的情况是，您旋转整个按钮，而不是图标。因此购物车将始终旋转。

我在这里所做的是从.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: 'F6D2';
  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: '.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;
}
D7';
  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>

英文:

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(&#39;.shopButtons&#39;)

//Shop animation on click

shopButtons.addEventListener(&#39;click&#39;, () =&gt; shopButtons.classList.toggle(&#39;openMenu&#39;));

.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: &#39;F6D2&#39;;
  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: &#39;.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: &#39;\1F6D2&#39;;
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: &#39;\00D7&#39;;
font-size: 50px;
}
D7&#39;;
  font-size: 50px;
}

&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;../css/style.css&quot;&gt;
  &lt;title&gt;Website&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;button class=&quot;shopButtons&quot; id=&quot;mainShop&quot;&gt;&lt;/button&gt;

  &lt;script src=&quot;../scripts/script.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

“Spinning menu button HTML/CSS/JS” 可以直接保留不翻译。

问题

答案1

CSS按钮悬停 – 更改白色文本

你可以使用 jQuery 事件、效果和 DOM 在 JavaScript 中吗？

将”Ngx-Pagination”的默认蓝色更改为其他颜色。

将Bootstrap的“loading”样式进度条更改为点样式进度条。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论