Portfolio Website Stucked

Hi, I am developing my portfolio site and trying to animate my skillcards. There are animated “showIt” classes and “iconcontainer” classes with unique IDs for skill cards in stylesheet.
In the stylesheet, the cards were animated, and in javascript, I tried to control the appearance of the card instances. The problem is that I want to toggle the “showIt” class of the unice skillcard during the schedule. the switcher does its job, but after adding the “showIt” class to the unice skillcards, there are a few seconds during the switching process, remove the “showIt” class from the cards. I will avoid this delay. Please help me!

<div class="card" id="MySkills"
        <div class="topsite">
          <img src="./media/skills.webp" alt="skills_photo" />
        </div>
        <div class="textcontener">
          <h2 id="skillsTitle">My Skills</h2>
          <div id="skillcontainer">
            <div class="iconcontainer" id="vhtml">
              <p>Html</p>
              <img src="./media/html.png " alt="html_icon" />
            </div>
            <div class="iconcontainer" id="vcss">
              <p>Css</p>
              <img src="./media/css3.png" alt="css_icon" />
            </div>
            <div class="iconcontainer" id="vjavaScript">
              <p>JavaScript</p>
              <img src="./media/javascript.png" alt="javascript_icon" />
            </div>
            <div class="iconcontainer" id="vgithub">
              <p>
                Github <br />
                https://github.com/vargajozsi
              </p>
              <img src="./media/github.png" alt="github_icon" />
            </div>
            <div class="iconcontainer" id="vbash">
              <p>Bash</p>
              <img src="./media/bash.png" alt="bash_icon" />
            </div>
            <div class="iconcontainer" id="vregex">
              <p>Regex</p>
              <img src="./media/regex.png" alt="regex_icon" />
            </div>
            <div class="iconcontainer" id="vjoomla">
              <p>Joomla</p>
              <img src="./media/joomla.png" alt="joomla_icon" />
            </div>
            <div class="iconcontainer" id="vwordpress">
              <p>Wordpress</p>
              <img src="./media/wordpress.png" alt="wordpress_icon" />
            </div>
            <div class="iconcontainer" id="vAdobePhotoshop">
              <p>Adobe Photoshop</p>
              <img src="./media/Photoshop.png" alt="adobephotoshop_icon" />
            </div>
            <div class="iconcontainer" id="vinkscape">
              <p>Inkscape</p>
              <img src="./media/Inkscape.svg" alt="inkscape_icon" />
            </div>
            <div class="iconcontainer" id="vgimp">
              <p>Gimp</p>
              <img src="./media/gimp.svg" alt="gimp_icon" />
            </div>
          </div>
          <div></div>
          <div class="datum">
            <p>2020.09.04.</p>
          </div>
        </div>
      </div>

stilesheet:

.iconcontainer {
  position: absolute;
  border: #7ddf8d solid 2px;
  width: 50%;
  margin: 2rem;
  text-align: center;
  display: block;
  opacity: 0;
}

.iconcontainer:hover {
  transition: transform 0.1s ease-in-out;
  transform: scale(99%);
}

.iconcontainer p {
  background-color: var(--csrdheader);
  padding: 1rem;
}
.iconcontainer img {
  margin: 2rem 0;
}

#vinkscape img,
#vgimp img,
#vjoomla img,
#vAdobePhotoshop img {
  width: auto;
  height: 3rem;
}

.showIt {
  animation: skillanimated 5s ease-in;
}

@keyframes skillanimated {
  from {
    opacity: 0.9;
    top: -100%;
    background: whitesmoke;
  }
  to {
    opacity: 1;
    top: 100%;
    background: #7ddf8d;
  }
}

javascript:


let svhtml = document.getElementById("vhtml");
let svcss = document.getElementById("vcss");
let svjavascript = document.getElementById("vjavaScript");
let svgithub = document.getElementById("vgithub");
let svbash = document.getElementById("vbash");
let svregex = document.getElementById("vregex");
let svjoomla = document.getElementById("vjoomla");
let svwordpress = document.getElementById("vwordpress");
let svAdobePhotoshop = document.getElementById("vAdobePhotoshop");
let svinkscape = document.getElementById("vinkscape");
let svgimp = document.getElementById("vgimp");

let showarray = [
  svhtml,
  svcss,
  svjavascript,
  svgithub,
  svbash,
  svregex,
  svjoomla,
  svwordpress,
  svAdobePhotoshop,
  svinkscape,
  svgimp,
];
let x = -1;

function displayNextItem() {
  x = x === showarray.length - 1 ? 0 : x + 1;
  showarray[x].classList.toggle("showIt");
}

function startTimer() {
  setInterval(displayNextItem, 2000);
}

startTimer();

github whole source: Github source
site live: livesite

I have found it!

function displayNextItem() {
  x = x === showarray.length - 1 ? 0 : x + 1;
  showarray[x].classList.add("showIt");
  if (x === 0) {
    showarray[showarray.length - 1].classList.remove("showIt");
  } else showarray[x - 1].classList.remove("showIt");
}
1 Like