如何给JS添加淡入/淡出效果(- class)

Question

我已经为我的网页编写了一些脚本。这个想法是只改变句子的一部分。该代码正在运行，但我希望它在部件更改时生效，例如淡入/淡出。我做不到，我不知道为什么。请帮忙。

这里是活跃的link项目：

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

将动画写入 CSS 中的一个 class，并将 class 添加到您的 span。
您需要删除和添加具有相同 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添加淡入/淡出效果(- class)

How to add fade in/ fade out effect (- class) to JS

javascript

html

jquery

effects