这是JavaScript中的@keyframes有什么问题？

huangapple
go评论183阅读模式
英文:

What is wrong with this @keyframes thing in JavaScript

问题

I have this single page HTML and I'm practicing some navBar animation with CSS and JavaScript. I wrote @keyframes in CSS and I'm trying to use it in an event listener in JavaScript but it doesn't work at all.

英文:

I have this single page HTML and I'm practicing some navBar animation with CSS and JavaScript. I wrote @keyframes in CSS and I'm trying to use it in a event listener in JavaScript but it doesn't work at all.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const navSlide = () =&gt; {
  3.   const burger = document.querySelector(&#39;.burger&#39;)
  4.   const nav = document.querySelector(&#39;.nav-links&#39;)
  5.   const navLinks = document.querySelectorAll(&#39;.nav-links li&#39;)
  7.   burger.addEventListener(&#39;click&#39;, () =&gt; {
  8.     nav.classList.toggle(&#39;nav-active&#39;)
  10.     navLinks.forEach((link, index) =&gt; {
  11.       console.log(link)
  12.       if (link.style.animation) {
  13.         link.style.animation = &#39;&#39;
  14.       } else {
  15.         link.style.animation = `navLinkFade 0.5s ease forward ${index / 7 + 2.5}s`
  16.       }
  17.     })
  19.   })
  20. }
  21. navSlide()

<!-- language: lang-css -->

  1. * {
  2.   box-sizing: border-box;
  3.   padding: 0;
  4.   margin: 0;
  5. }
  7. nav {
  8.   display: flex;
  9.   justify-content: space-around;
  10.   align-items: center;
  11.   min-height: 8vh;
  12.   font-family: &#39;Poppins&#39;, sans-serif;
  13.   background-color: #5d4954;
  14. }
  16. .logo {
  17.   color: wheat;
  18.   text-transform: uppercase;
  19.   letter-spacing: 5px;
  20.   font-size: 20px;
  21. }
  23. .nav-links {
  24.   display: flex;
  25.   justify-content: space-around;
  26.   width: 30%;
  27. }
  29. .nav-links a {
  30.   color: wheat;
  31.   text-decoration: none;
  32.   letter-spacing: 3px;
  33.   font-weight: bold;
  34.   font-size: 14px;
  35. }
  37. .nav-links li {
  38.   list-style: none;
  39. }
  41. .burger {
  42.   display: none;
  43.   cursor: pointer;
  44. }
  46. .burger div {
  47.   width: 25px;
  48.   height: 2px;
  49.   background-color: wheat;
  50.   margin: 5px;
  51. }
  53. @media screen and (max-width: 1400px) {
  54.   .nav-links {
  55.     width: 60%;
  56.   }
  57. }
  59. @media screen and (max-width: 768px) {
  60.   body {
  61.     overflow-x: hidden;
  62.   }
  63.   .nav-links {
  64.     position: absolute;
  65.     right: 0;
  66.     height: 92vh;
  67.     top: 8vh;
  68.     background-color: #5d4954;
  69.     display: flex;
  70.     flex-direction: column;
  71.     align-items: center;
  72.     width: 50%;
  73.     transform: translateX(100%);
  74.     transition: transform 0.5s ease-in;
  75.   }
  76.   .nav-links li {
  77.     opacity: 0;
  78.   }
  79.   .burger {
  80.     display: block;
  81.   }
  82. }
  84. .nav-active {
  85.   transform: translateX(0%);
  86. }
  88. @keyframes navLinkFade {
  89.   from {
  90.     opacity: 0;
  91.     transform: translateX(50px);
  92.   }
  93.   to {
  94.     opacity: 1;
  95.     transform: translateX(0px);
  96.   }
  97. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  4. &lt;head&gt;
  5.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.   &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  7.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  8.   &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
  9.   &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
  10.   &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  11.   &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  12.   &lt;title&gt;NAVIGATION&lt;/title&gt;
  13. &lt;/head&gt;
  15. &lt;body&gt;
  16.   &lt;nav&gt;
  17.     &lt;div class=&quot;logo&quot;&gt;
  18.       &lt;h4&gt;The Nav&lt;/h4&gt;
  19.     &lt;/div&gt;
  20.     &lt;ul class=&quot;nav-links&quot;&gt;
  21.       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  22.       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  23.       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Work&lt;/a&gt;&lt;/li&gt;
  24.       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Projects&lt;/a&gt;&lt;/li&gt;
  25.     &lt;/ul&gt;
  26.     &lt;div class=&quot;burger&quot;&gt;
  27.       &lt;div class=&quot;line1&quot;&gt;&lt;/div&gt;
  28.       &lt;div class=&quot;line2&quot;&gt;&lt;/div&gt;
  29.       &lt;div class=&quot;line3&quot;&gt;&lt;/div&gt;
  30.     &lt;/div&gt;
  31.   &lt;/nav&gt;
  32.   &lt;script src=&quot;./script.js&quot;&gt;&lt;/script&gt;
  33. &lt;/body&gt;
  35. &lt;/html&gt;

<!-- end snippet -->

Sorry! I'm too new here and I don't know how to beautify my text

wrote @keyframes in CSS, won't work in JavaScript

答案1

得分: 0

将这部分内容翻译成中文如下：

添加到CSS中的代码：

  1. .fade {
  2.   animation-name: navLinkFade;
  3.   animation-duration: 0.5s;
  4.   animation-timing-function: ease;
  5.   animation-fill-mode: forwards;
  6. }

并且像这样使用：

  1. navLinks.forEach((link, index) => {
  2.    link.style['animation-delay'] = `${index / 7 + 2.5}s`
  3.    link.classList.toggle('fade')
  4. })
英文:

add this to CSS

  1.     .fade {
  2.       animation-name: navLinkFade;
  3.       animation-duration: 0.5s;
  4.       animation-timing-function: ease;
  5.       animation-fill-mode: forwards;
  6.     }

and use like this

  1. navLinks.forEach((link, index) =&gt; {
  2.    link.style[&#39;animation-delay&#39;] = `${index / 7 + 2.5}s`
  3.    link.classList.toggle(&#39;fade&#39;)
  4. })

huangapple
  • 本文由 发表于 2023年5月11日 07:27:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/76223196.html
  • css
  • css-animations
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定