Animate the text before it fades away

Question

Animate the text before it fades away

Could someone help me figure out how to make my text animations work correctly? I want to show and hide specific text with animation when buttons are pressed, but I'm having trouble implementing the hiding animation. Any guidance would be appreciated.

I apologize for any language errors as I used Google Translate to write this message.

Here is the code I have so far:

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>

javascript html css

Answer 1

Answer №1

It seems that there's a limitation in animating the display property. While you have CSS opacity set, changing display to none in the onclick event would cancel that out.

I took the liberty of tweaking your code to include some transitions that align with what I believe you're aiming for.

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>

Answer 2

It seems that there's a limitation in animating the display property. While you have CSS opacity set, changing display to none in the onclick event would cancel that out.

I took the liberty of tweaking your code to include some transitions that align with what I believe you're aiming for.

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>

Answer 3

Answer №2

Could you be referencing this specific feature?

Take a look and let me know your opinion

I have also included a codepen link

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>

Answer 4

Could you be referencing this specific feature?

Take a look and let me know your opinion

I have also included a codepen link

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>

Animate the text before it fades away

Answer №1

Answer №2

Similar questions

Dealing with GraphQL mutation errors without relying on the Apollo onError() function

Bundling sub-components using Rollup for NodeJS application packaging

Enhancing the styling of checkboxes using CSS and Javascript

Unable to determine the size of the array being passed as a parameter in the function

Discover the ins and outs of the "DOM" within a string, treating it as HTML in AngularJS

Update the appearance of buttons using AngularJS

The functionality of the Wordpress editor is impaired when the parent element is set to display:none during rendering

Using Selenium to handle asynchronous JavaScript requests

Shifting the placement of a component in Vue JS when hovering the mouse

Issue with php's mysql_fetch_assoc() function

Ensure that the flex item spans the entire width of the page

Hover effects in CSS animations can be hit or miss, with some working smoothly while others may

How can I convert the stylesheet link from fonts.google.com into a CSS class and include it in my file.css as an internal style instead of an external one?

Reloading a page in Vue-Router after submitting a form

Using JavaScript, transform a client's date/time string into a JSON-compatible date/time string

Creating line breaks for ToolTip titles in Material-UI can be achieved by using the appropriate syntax and

"div p" or "div * p"? Do they have the same meaning or is there a difference between them?

What is the best way to display grouped items horizontally in an ASP.NET ListView?

What is the best way to style HTML content with MathJax following its retrieval with jQuery.load?

Combining Multiple Tables Using Knex SQL Joins and Storing the Result in an Array