0

How to activate css animations using javascript?

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? 😅

11th Nov 2018, 3:42 PM
Yoni Simian
5 ответов
0
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
11th Nov 2018, 4:18 PM
voidneo
0
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)
11th Nov 2018, 4:48 PM
Yoni Simian
0
Can you make the code public or.post it here? I wanna make a test
11th Nov 2018, 4:55 PM
voidneo
0
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
11th Nov 2018, 4:59 PM
Yoni Simian
0
There's a syntax error on the animation transform function which causes the animation not to work
11th Nov 2018, 5:22 PM
voidneo