Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Gina Scalpone
Gina Scalpone
21,330 Points

CSS transition won't trigger when javascript is added.

I have three images that slide in from offscreen using transform: translate(). The transform has a 4s transition duration and two of them have delays. Without any script tags (or with blank script tags), the transition works fine. However, when I try to link an external javascript file, or add internal javascript, the transition duration and delays don't work, and the images are translated immediately.

Does anyone know why this would happen?

Workspace Snapshot

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

I'd guess that the JavaScript applies styles directly to your elements that override the CSS.

Can you make a snapshot of your workspace and post the link to it here?

Gina Scalpone
Gina Scalpone
21,330 Points

That was my original guess but I did some tests and it happened even when the only JavaScript I added was console.log('Hello World!').

EDIT: Snapshot added. Right now, at the bottom on index.html, there's a script tag with console.log('Hello World!'), and the transition doesn't work. If you leave the script tag but remove the actual JavaScript, the transition runs.