Fading

Update: I got an email from James at VIDesignz who found another solution to this problem using the :empty selector. I added it at the end of the article.

As part of our JSFoo workshop today I was asked to look into an issue a team had that you can not apply a CSS transition to a newly created element when you change the CSS settings in JavaScript. As I was dealing with professionals, they created a simple JSFiddle to show the problem:

As you see just changing the property (in this case the opacity) is not enough to have a transition. There are a few solutions to this shown in the Fiddle, too, like forcing a reflow, which of course could be a terrible idea.

I played with this and found the solution to be to not change the properties in JavaScript (which is kind of dirty anyways) but leave it all to CSS instead. The biggest part of the solution is not to use a transition but an animation instead and trigger it by applying a class to the newly created element right after adding it to the DOM:

As part of our JSFoo workshop today I was asked to look into an issue a team had that you can not apply a CSS transition to a newly created element when you change the CSS settings in JavaScript. As I was dealing with professionals, they created a simple JSFiddle to show the problem:

As you see just changing the property (in this case the opacity) is not enough to have a transition. There are a few solutions to this shown in the Fiddle, too, like forcing a reflow, which of course could be a terrible idea.

I played with this and found the solution to be to not change the properties in JavaScript (which is kind of dirty anyways) but leave it all to CSS instead. The biggest part of the solution is not to use a transition but an animation instead and trigger it by applying a class to the newly created element right after adding it to the DOM:

What’s Inside

As a member of the SchoolofWeb.org you will have access to:

* Web design, Web development and Web business resources including educational content, custom curriculum and training resources covering advanced techniques, and the most up-to-date best practices and methods
* Lesson plans for those that teach
* How-to guides to establish a Web professional program at your school or college
* Web professional directories
* Web professional job boards
* Web professional career guides

National Web Design Contest HTML and CSS Training Video

2018 Summer Class

WebProfessionals.org (aka the World Organization of Webmasters) has a 20+ year history of supporting practicing professionals and those that teach them. We also support aspiring web professionals. To that end, we are offering a summer class fro high school students and adult learners who would like to know more about creating web pages. This two week online course can be started any time from June 1, 2018, through late July, 2018. All assignments must be completed before August 10, 2018. Learners will have direct access to a teacher (who is available to answer questions and provide support and encouragement).