javascript onclick css fade in each time, not just 1st time

Question

How can I have text fade in on each click and not just the first time using css transition and JavaScript?

Here is what I have so far

<style>
#data {
    transition: .7s;
}
</style>

<h1 id="data"></h1>
<a href="#" id="clicker">click 1</a>

document.getElementById('data').style.opacity = 0;
function go(event){
    event.preventDefault();
    document.getElementById('data').style.opacity = 1;
    document.getElementById('data').innerHTML = 'test';
}
document.getElementById('clicker').addEventListener('click', go);

Do you mean that more text will fade in on each click, or do you mean the text will automatically fade out so that it is gone before you click again? — andrew, Nov 04 '21 at 04:36
The first click there is no text and then the initial text fades in, when you click again the text should instantly disappear and fade in again. — drooh, Nov 04 '21 at 04:37

aerial · Answer 1 · 2021-11-06T05:25:02.097

It can also be done using Element.animate():

const dataElement = document.getElementById('data')
dataElement.style.opacity = 0

function go(event) {
  event.preventDefault()
  dataElement.animate({
    opacity: [0, 1]
  }, 700).onfinish = () => dataElement.style.opacity = 1
}
document.getElementById('clicker').addEventListener('click', go)

<h1 class="fade-in" id="data">test</h1>
<a href="#" id="clicker">click 1</a>

EDIT: In the above snippet onfinish event handler was used to maintain the final opacity value since it was being set back to 0 after the animation ends. But I found that this can also be achieved by setting fill: 'forwards' in the keyframe options:

const dataElement = document.getElementById('data')
dataElement.style.opacity = 0

function go(event) {
  event.preventDefault()
  dataElement.animate({
    opacity: [0, 1]
  }, {
    duration: 700,
    fill: 'forwards'
  })
}
document.getElementById('clicker').addEventListener('click', go)

<h1 class="fade-in" id="data">test</h1>
<a href="#" id="clicker">click 1</a>

Also you might want to check browser compatibility before implementing those approaches

And if you want a safer approach you may use css animations:

const data = document.getElementById('data')
data.style.opacity = 0
const clicker = document.getElementById('clicker')
clicker.addEventListener('click', () => {
  data.classList.remove('fade-in')
  data.offsetWidth // required to trigger a reflow and restart the animation
  data.classList.add('fade-in')
})

.fade-in {
  animation-name: fadein-animation;
  animation-duration: 700ms;
  animation-fill-mode: forwards;
}

@keyframes fadein-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<h1 id="data">test</h1>
<a href="#" id="clicker">click 1</a>

this is really interesting, I really like this approach, no css needed. Would you explain this part in more detail? .onfinish = () => dataElement.style.opacity = 1 — drooh, Nov 04 '21 at 18:00
@drooh The opacity was being set back to 0 after the animation finishes so this just sets it to 1. I also found that `fill: 'forwards'` can be used instead to maintain the final state of the animation. I will update the answer with the new solution. — aerial, Nov 05 '21 at 05:13
very nice, I'm using it like this data.animate({opacity:[0,1]},{duration:400,fill:'forwards'}); — drooh, Nov 05 '21 at 20:27
When was data.animate created/released? Meaning, is it browser wide safe for production in 2021? — drooh, Nov 05 '21 at 20:31
@drooh From the [compatibility table](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate#browser_compatibility) it supported in chrome and firefox since 2016 but no support for IE and some older safari versions. Also some features are still experimental so for production I would probably use css animations. I edited the answer and included the add/remove css class approach that does the same thing. — aerial, Nov 06 '21 at 05:24

score 1 · Answer 2 · answered Nov 04 '21 at 04:46

setTimeout might work for you. On click set it invisible immediately and use setTimeout to have a delay then show it again.

document.getElementById('data').style.opacity = 0;
document.getElementById('data').innerHTML = 'test';
function go(event){
    event.preventDefault();
    document.getElementById('data').style.opacity = 0;
    setTimeout(() => {
      document.getElementById('data').style.opacity = 1;
    }, 1000);
}
document.getElementById('clicker').addEventListener('click', go);

#data {
    transition: .7s;
}

<h1 id="data"></h1>
<a href="#" id="clicker">click 1</a>

drooh · Answer 3 · 2021-11-05T20:35:53.050

1

<h1 id="data" style="opacity:0">&nbsp;</h1>
<button type="button" id="clicker">Fade In</button> 
<script>
var data = document.getElementById('data');
function fadeIn(){
    data.innerHTML = 'Data entered successfully.';
    data.animate({opacity:[0,1]},{duration:400,fill:'forwards'});
}
document.getElementById('clicker').addEventListener('click',fadeIn);
</script>

edited Nov 05 '21 at 20:35

answered Nov 04 '21 at 22:04

drooh

578
4
18
46

javascript onclick css fade in each time, not just 1st time

3 Answers3