如何為JS添加淡入/淡出效果（-類）

Question

我為我的網頁編寫了小腳本。 這個想法是只改變句子的一部分。 代碼正在運行，但我希望它在部件更改時生效，例如淡入/淡出。 我做不到我不知道為什么。 請幫忙。

這是項目的活動鏈接：

https://word-change-js.glitch.me/

這是代碼js：

var positionSlider = {
  positions: [
    "java",
    "php",
    "net",
    "python",
    "sql",
    "scala"],

  losuj: function() {

  const randomPosition = this.positions[Math.floor(Math.random() * this.positions.length)];

    document.getElementById("pozycja").innerHTML = randomPosition;

  }
};

positionSlider.losuj();

setInterval(function() {
  positionSlider.losuj();
}, 2000);

這是代碼 html：

<!DOCTYPE html>
<html lang="en">
  <body>
     <h1>Właśnie teraz realizujemy rekrutacje na stanowisko <span id="pozycja"></span></h1>
  </body>
</html>

Answer 1

將 animation 寫入 CSS 中的一個 class 並將該 ZA2F2ED4F8EBC2CBB4C21A29DC40AB61D 添加到您的跨度。
您需要刪除和添加具有相同 class 和更新值的跨度。

將完整代碼放在一個文件中，您可以復制粘貼，這是在 chrome 中工作，希望您能為您提供解決的線索 -

<!DOCTYPE html>
  <html lang="en">
    <style>
     .spanToFadeInAndOut {
       width: 200px;
       height: 200px;
       -webkit-animation: fadeinout 4s linear forwards;
       animation: fadeinout 4s linear forwards;
     }

     @-webkit-keyframes fadeinout {
       0% {
         opacity: 0;
       }
       100% {
         opacity: 1;
       }
     }

     @keyframes fadeinout {
       0% {
         opacity: 0;
       }
       100% {
         opacity: 1;
       }
     }
  </style>
  <body>
    <h1>Właśnie teraz realizujemy rekrutacje na stanowisko <span class="spanToFadeInAndOut" id="pozycja">Anks</span>
    </h1>
    <script>
       var positionSlider = { positions: ['java', 'php', 'net', 'python', 'sql', 'scala'],     
       losuj: function () {
           const randomPosition = this.positions[
           Math.floor(Math.random() * this.positions.length)
         ];
         // Removing old span from the DOM.
         const oldSpan = document.querySelector('#pozycja');
         const parentNode = oldSpan.parentNode;
         parentNode.removeChild(oldSpan);

         // Adding new span from the DOM.
         const span = document.createElement('span');
         span.setAttribute('id', 'pozycja');
         span.setAttribute('class', 'spanToFadeInAndOut');
         span.innerHTML = randomPosition;
         parentNode.appendChild(span);
      },
    };

    positionSlider.losuj();

    setInterval(function () {
      positionSlider.losuj();
    }, 2000);
   </script>
  </body>
</html>

如何為JS添加淡入/淡出效果（-類）

問題描述

1 個解決方案

解決方案1
1 已采納 2020-06-05 15:02:05

如何為JS添加淡入/淡出效果（-類）

問題描述

1 個解決方案

解決方案1 1 已采納 2020-06-05 15:02:05

解決方案1
1 已采納 2020-06-05 15:02:05