How to activate css animations using javascript?

Question

Hey everyone,
I'm trying to activate a css animation using javascript but it won't work for some reason.

Basically my code is:
HTML:
<p class="1">this will change</p>
<p class="2">this will toggle the change</p>

CSS:
.1 { width: 100px; }
.1.change { animation: anim 1s ease }
@keyframes anim {
from {width: 100px;}
to {width: 200px;}
}

JAVASCRIPT:
text = doc.getEleFromClass("1");
toggle = doc.getFromClass("2");
toggle.onclick = function() {
text.classList.add('change');
}

Soooo...
Where was I wrong? 😅

Answer 1

The getElementsByClassName method returns an array of elements, so you gotta specify which one you want. I strongly recommend use the get by id method because when you change the classes, your method won't be able to find the element

Answer 2

I have tried to access the element both by treating it as an array and using getElementFromId, and both times the animation just didn't happen (the rest of the code DID happen when I clicked the paragraph)

Answer 3

Can you make the code public or.post it here? I wanna make a test

Answer 4

I'll make it, but it's in hebrew 😅
Basically there are 3 titles that by clicking each you'll open a hidden paragraph.

The first title won't work (this is where I tried the animation), and the other two WILL work, but without animation (I've just added and removed the element itself).

The code is Meme Israelim

Answer 5

There's a syntax error on the animation transform function which causes the animation not to work