The Best Way to Enable CSS Animations with JavaScript?

GET THE SOURCE CODE:
codepen.io/dco...
In today's video I'll show you how we can use JavaScript to enable CSS transitions by adding or removing classes from HTML elements.
This technique is great because you're able to prevent the usage of inline styles, allowing for cleaner code and keeping your CSS purely for styling the webpage.
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript #css

[@NedumEze]

Hi Dom, Cheers. Some advise against the use of Classes in Javascript(ing). Leave Classes for CSS, they argue with reasons though. Could datasets, IDs, etc., be used in these examples?

[@umangternate]

Today I found dcode VScode theme. Thank you for creating it. It is so retina-friendly.

[@dcode-software]

Awesome 🙂 glad to hear you like it. Out of curiosity, did you find my theme or channel first?

[@jordanegli5190]

ive been looking everywhere for this thank you so much

[@olegkravchenko9655]

Hi, Dom! Thanks for the great content again! As for your last course, I was waiting for it actually :) But could you add some more content to it? Three to five projects from this channel would be fine if you arrange them by level of difficulty (you even have projects using JavaScript Classes here). That way your course could have more value for potential students. Just a suggestion. Thank you for this channel and all its content again!

[@montebont]

Hi Dom. Thanks for this video - worth watching as always. I'd like your view on this one: trigger animations by toggling a class or setting the target elements data attribute ? Like 'data-pulse' or 'data-hidden'. Or even both ;-) IMHO a class (generic behavior) should be used for the same behavior for multiple elements. That is what a class is supposed to do. For a single element I'd prefer to use the data attribute - if only to avoid using the elements 'id' in CSS. All the best, Ed

[@shubk9343]

Hey, I was able to apply this to my portfolio, I had a doubt. for example: I have a keyframe named "animate", and am applying it to 2 different classes "class1" & "class2", what can I do if I want the animation to run for '1 second' with class1 and for '2 seconds' on class2.

[@user-iy3so4gn9f]

what is the font used in the editor?

[@mrmiquy6640]

How named extension which makes cursor moving smoothly?

[@c.n.h.4427]

Really helpful, really nicely explained and not complicated, thank you very much!!!

[@maximmarinovskyi2267]

Thats a great video, right the one I was looking for. Thank you!!!

[@kevinfisher7032]

Very useful.... It unleashes the power of CSS transitions... I find myself using this method this all the time. I might suggest you do a little extra video where you transition more than one element and then you can get into using forEach loops along with querySelectAll (cos, and I speak from experience, it can be a royal pain in the butt until you figure it out :-)

[@leonmarienga3293]

You are very helpful, thank you

[@paulofernando78]

Thanks so much for this!

[@vikaskanoo634]

Awesome video. I loved it !!

[@tokhenz]

Thx a lot mate!!!

[@bellow247]

wow thank you I thought I was going crazy nobody covered this 🤣

[@dcode-software]

Glad I could help!

[@VinaySingh-jm8iw]

Not the best, more like a simple solution to a simple use-case. The more common need to trigger animations in JS would be one iteration animations triggered at will multiple times (e.g. a warning animation when the user does something wrong), which this doesn't cover. There are multiple ways to do this, some with classes, some without. I would suggest you create a video going through those options as a follow up for developers that need to learn that.

[@victory_lucky]

Hi Dom, it's been a while

[@augischadiegils.5109]

❤️❤️❤️❤️