JS does'nt trigger css animation

Question

when first time the button clicked, the fade animation(opacity changing) works. But for next all clicks it does'nt work anymore. When i do debug it shows it's working everytime. But in real why doesn't?

let colorArray = ['red','yellow','green','teal']
let index = 0

function imageChanger(){
    document.querySelector('.container').id = ''
    if(index == colorArray.length-1) index = 0
    else index++
    document.querySelector('.container').style.backgroundColor = colorArray[index]
    document.querySelector('.container').id = 'fade'
}

.container{
    height: 300px;
    max-width: 400px;
    background-color:  teal;
    
}
#fade{
    animation: fade 5s;
}
@keyframes fade{
    from{opacity:.4 }
    to{opacity: 1}
}

<button onclick="imageChanger()">Change</button>
<div class="container" id=""></div>

Yosef Tukachinsky · Accepted Answer · 2020-04-11 16:04:39Z

Once you added the fade id its run the animation and not repeat anymore.

You should remove it each time and add again. using setTimeout to give the css the time to find it removed.

Also I will reccomend to use class instead an id, and use transition instead keyframe

let colorArray = ['red','yellow','green','teal']
let index = 0

function imageChanger(){
    document.querySelector('.container').id = ''
    if(index == colorArray.length-1) index = 0
    else index++
    document.querySelector('.container').style.backgroundColor = colorArray[index]
    document.querySelector('.container').classList.remove('fade')
    setTimeout( function(){    document.querySelector('.container').classList.add('fade')
}, 50);
}

.container{
    height: 300px;
    max-width: 400px;
    background-color:  teal;
    opacity: .2;
    transition: opacity 0s linear;
}
.container.fade{
    transition: opacity 3s linear;
    opacity: 1;
}

<button onclick="imageChanger()">Change</button>
<div class="container fade"></div>

James.D · Accepted Answer · 2020-04-11 16:47:05Z

0

I would mostly agree with the above answer. Just want to point out that if you want the first teal block to show up as teal and not opaque to start with, you need to include the fade class in your initial html.

Also if you want the first transition to be teal to red, you should start with an index position of -1 and not 0.

<button onclick="imageChanger()">Change</button>
<div class="container fade" id=""></div>

let index = -1;

answered Apr 11, 2020 at 16:47

James.D

161 bronze badge

Collectives™ on Stack Overflow

JS does'nt trigger css animation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related