+ 3

Why doesn't this animation work, on my laptop but my phone? JS

I've been searching and trying new things to figure out this code, but I give up. @ line 92; The menu button (three lines at the top left) It's supposed to rotate the inn(Element / container), and it does. But when you click on it again, it's supposed to undo the rotate animation using "undo 1s 1 forwards" animation; but that part doesn't work. WHY / how? https://code.sololearn.com/W8BkbIAbcqwv/#js

18th Oct 2019, 2:08 AM
Ginfio
Ginfio - avatar
3 Answers
+ 4
If you add console.log(inn.style.animation) right after line 93, you should find that the animation you are checking for in your if statement is never true. This causes the else to always be the block which is executed. After changing line 94 to if (inn.style.animation == "1s ease 0s 1 normal forwards running rot") your code works perfectly for me. https://code.sololearn.com/WA8O10t20JVC/?ref=app
18th Oct 2019, 2:23 AM
Hatsy Rei
Hatsy Rei - avatar
+ 3
Hatsy Rei Works for me too. Thank You. btw, was it because I didn't put the other animation properties: ease, running,... - that it wasn't working?
18th Oct 2019, 2:34 AM
Ginfio
Ginfio - avatar
+ 2
Ginfio I actually have no idea. :D With my limited experience in web, what I usually do when I work with manipulating animations via JS, is that my animations are all wrapped in their respective CSS classes. All my JS does is to add and remove certain classes from elements that I want to animate. The stuff you did is pretty new to me.
18th Oct 2019, 3:00 AM
Hatsy Rei
Hatsy Rei - avatar