The Best Way to Enable CSS Animations with JavaScript?

Подписаться 132 тыс.

Просмотров 24 тыс.

50% 1

GET THE SOURCE CODE:
codepen.io/dcode-software/pen...
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/user/domenic-co...
🎨 Download my VS Code theme - marketplace.visualstudio.com/...
💜 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

Опубликовано:

22 май 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 21

@jordanegli5190 Год назад

ive been looking everywhere for this thank you so much

@olegkravchenko9655 2 года назад

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!

@kevinfisher7032 2 года назад

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 :-)

@maximmarinovskyi2267 Год назад

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

@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

@umangternate 2 года назад

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

@dcode-software 2 года назад

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

@vikaskanoo634 2 года назад

Awesome video. I loved it !!

@NedumEze 2 года назад

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?

@leonmarienga3293 Год назад

You are very helpful, thank you

@paulofernando78 Год назад

Thanks so much for this!

@tokhenz 9 месяцев назад

Thx a lot mate!!!

@shubk9343 11 месяцев назад

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.

@mrmiquy6640 Год назад

How named extension which makes cursor moving smoothly?

@bellow247 Год назад

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

@dcode-software Год назад

Glad I could help!

@victory_lucky 2 года назад

Hi Dom, it's been a while

@c.n.h.4427 10 месяцев назад

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

@user-iy3so4gn9f 3 месяца назад

what is the font used in the editor?

@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.