Html - Text animation before it disappears

mogire7144
December 16, 2023
220 views
0 votes
2 Answers

I made animations for text to show and hide, but I don’t know how to make it work correctly. I’m bad at programming, so please help.ㅤㅤㅤㅤㅤ

My English is bad too, so this is written by a google translateㅤㅤㅤㅤㅤㅤㅤㅤ

I want that when a button is pressed, a specific text with animation is shown, and another is hiding, and also when the “hide” button is pressed, the text is hiding, also with animation. The problem is that the text hiding without animation, I just don’t know how to attach it.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

function hide(Id) {
  document.getElementById(Id).style.display = "none";
}

function show(Id) {
  document.getElementById(Id).style.display = "block";
}

p {text-align: center;
}
@keyframes text-fade-in {
  0% {
    opacity: 0;
    transform: translateX(-10vw);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0vw);
  }
}

.text-fade-in {
  opacity: 0;
  animation-name: text-fade-in;
  animation-delay: 0.4s;
  animation-duration: 0.4s;
  animation-timing-function: easeOutCirc;
  animation-fill-mode: forwards;
}

@keyframes text-fade-out {
  0% {
    opacity: 1;
    transform: translateX(0vw);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(-10vw);
  }
}

.text-fade-out {
  opacity: 1;
  animation-name: text-fade-out;
  animation-delay: 0.4s;
  animation-duration: 0.4s;
  animation-timing-function: easeOutCirc;
  animation-fill-mode: forwards;
}

<button onclick="show('Text1'); hide('Text2'); hide('Text3')">Text1</button>

<button onclick="show('Text2'); hide('Text1'); hide('Text3')">Text2</button>

<button onclick="show('Text3'); hide('Text1'); hide('Text2')">Text3</button>

<button onclick="hide('Text1'); hide('Text2'); hide('Text3')">Hide </button>

<p class="text-fade-in" id="Text1" style="display:none">Text1</p>

<p class="text-fade-in" id="Text2" style="display:none">Text2</p>

<p class="text-fade-in" id="Text3" style="display:none">Text3</p>

Answers

One issue that I see is that you can’t animate the display property. I see that you have an opacity set using CSS, but setting the display to none in your onclick handler would negate that.

I modified your code to produce some transitions based on what I am guessing that you are attempting to do.

const mainButtons = document.querySelectorAll('.btn')
const text1 = document.querySelector('#Text1')
const text2 = document.querySelector('#Text2')
const text3 = document.querySelector('#Text3')
const hideAll = document.querySelector('.hide-all')
const allText = document.querySelectorAll('p')

mainButtons.forEach((button, index) => {
  button.addEventListener("click", () => {
    switch(index) {
      case 0:
        text1.style.left = "0"
        break;
      case 1:
        text2.style.left = "0"
        break;
      case 2:
        text3.style.left = "0"
    }
  })
})

hideAll.addEventListener('click', () => {
  allText.forEach((text) => {
    text.style.left = "-100%";
  })
})

.text-container {
  position: relative;
}

#Text1 {
  position: relative;
  left: -100%;
  transition: all 500ms ease-in-out;
}

#Text2 {
  position: relative;
  left: -100%;
  transition: all 500ms ease-in-out;
}

#Text3 {
  position: relative;
  left: -100%;
  transition: all 500ms ease-in-out;
}

<button class='btn'>Text1</button>
<button class='btn'>Text2</button>
<button class='btn'>Text3</button>
<button class='hide-all'>Hide all</button>
    
<div class="text-container">
  <p class="text-fade-in" id = "Text1">Text1</p>
  <p class="text-fade-in" id = "Text2">Text2</p>
  <p class="text-fade-in" id = "Text3">Text3</p>
</div>

I think you are talking about this functionality.

Just check it and tell me your thought

I am also adding a codepen

let p = document.querySelectorAll("p");


for (let i = 0; i < p.length; i++) {
  p[i].addEventListener("animationend", function () {
    if (
      p[i].style.display !== "none" &&
      [...p[i].classList].includes("text-fade-out")
    ) {
      p[i].style.display = "none";
    }
  });
}

let isClearTimeout = false;
 function show(Id) {
  let ce = document.getElementById(Id);
  let ad = 0;
  if(ce.style.display !== 'none') return;

 
  Array.from(p).forEach((el) => {
    if (el.style.display !== "none") {
      hide();
      ad = parseFloat(window.getComputedStyle(el).animationDuration) * 1000;
    }
  });
  if(isClearTimeout){
    clearTimeout(isClearTimeout)
  }
  isClearTimeout = setTimeout(() => {
    if (ce.style.display === "none") {
      ce.classList.remove("text-fade-out");
      ce.style.display = "block";
      ce.classList.add("text-fade-in");
    }
  }, ad);
}

function hide() {
  // let ce = document.getElementById(Id);
  
  
  Array.from(p).forEach((ce)=>{
    if (ce.style.display === "block") {
    ce.classList.remove("text-fade-in");

    ce.classList.add("text-fade-out");
  }
  })
}

 @keyframes text-fade-in {
      0% {
        opacity: 0;
        transform: translateX(-10vw);
      }
      80% {
        opacity: 1;
      }
      100% {
        opacity: 1;
        transform: translateX(0vw);
      }
    }
    .text-fade-in {
      opacity: 0;
      animation-name: text-fade-in;
/*       animation-delay: 0.4s; */
      animation-duration: 0.4s;
      animation-timing-function: easeOutCirc;
      animation-fill-mode: forwards;
    }
    
    @keyframes text-fade-out {
      0% {
        opacity: 1;
        transform: translateX(0vw);
      }
      80% {
        opacity: 0;
      }
      100% {
        opacity: 0;
        transform: translateX(-10vw);
      }
    }
    .text-fade-out {
      opacity: 1;
      animation-name: text-fade-out;
/*       animation-delay: 0.4s; */
      animation-duration: 0.4s;
      animation-timing-function: easeOutCirc;
      animation-fill-mode: forwards;
    }

<body>
  <button onclick="show('Text1')">Text1</button>
  <button onclick="show('Text2')">Text2</button>
  <button onclick="show('Text3')">Text3</button>
  <button onclick="hide()">Hide all</button>

  <p class="text-fade-in" id="Text1" style="display:none" >Text1</p>
  <p class="text-fade-in" id="Text2" style="display:none" >Text2</p>
  <p class="text-fade-in" id="Text3" style="display:none" >Text3</p>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Text animation before it disappears

Answers