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
Kit Howlett
6,774 PointsProblem: Transition effects more than just the hover state
I'm struggling with this first video. I opened the workspace and copied the example. The hover effect works but I get an undesirable transition on the button element every-time the page reloads.
For example, when the page reloads the default button styles appear over a 1s duration. I do get the desired affect with the button but I only want this. I'm using Google Chrome as my browser.
Kit Howlett
6,774 PointsHi Steven, link to workspace is here: https://w.trhou.se/6lxlnzi8k0
1 Answer
Steven Parker
231,261 PointsThis is a tricky one. One solution is to inhibit transitions before the page has loaded with this CSS:
.preload * { transition: none !important; }
And this HTML/script to enable them after loading:
<body class="preload" onload="document.body.className=null">
Kit Howlett
6,774 PointsOkay, thank you! Do you know why this is happening? Is it a problem with my browser and did you have the same issue? Is this a common problem I need to be aware of? Appreciate your support as always :)
Steven Parker
231,261 PointsIt's common for this to happen (and with different browsers), but depending on what visual effect is involved, it's not always a "problem".
Steven Parker
231,261 PointsSteven Parker
231,261 PointsTo allow replication of your issue, make a snapshot of your workspace and post the link to it here.