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

Question

I have written little script for my webpage. The idea is to change only the part of the sentence. The code is working BUT I would like it to have effect when the part is changed eg fade in / fade out. I cant do it I dont know why. Please help.

here is the active link to the project:

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

here is the code 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);

here is the code 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

Write animation to one class in CSS and add that class to your span.
You need to remove and add span with the same class and updated value.

Putting complete code in one file, you can copy paste, this is working in chrome, hope you will provide you the clue to solve -

<!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>

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

Question

1 answers

solution1
1 ACCPTED 2020-06-05 15:02:05

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

Question

1 answers

solution1 1 ACCPTED 2020-06-05 15:02:05

solution1
1 ACCPTED 2020-06-05 15:02:05