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 jsdevtom
jsdevtom
16,963 Points

Why is my CSS transition being delayed? (Codeped included)

Hi. So I have set my transitions to 0s delay because when the menu was toggled shut, and there was no delay specified, it was delayed. But even though I have now specified transition-delay: 0s; and 0s delay in the transition shorthand. It is still being delayed.

http://codepen.io/1db8k/pen/dMRWpX

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

In your navigation and show classes you seemto be using both the long and shorthand syntax for your transitions. They seem fine. Try putting your transition properties in your media queries since you don't need them on desktop view.

@media (min-width: 40em) {

.navigation {

  -webkit-transition: max-height 1s ease-in 0s;
  transition: max-height 1s ease-in 0s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

.show {

  -webkit-transition: max-height 1s ease-in 0s;
  transition: max-height 1s ease-in 0s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
   }
}
jsdevtom
jsdevtom
16,963 Points

Hi Jonathon, thanks for your reply! :-)

I've tried your suggestion (and variations of it such as removing the delay from the shorthand syntax) , but it still doesn't work.

I don't think it's to do with the javascript either because when I view the Elements tab with chrome dev tools, nav gets the class show instantly after clicking menu-button. Which means that it's either a bug or the CSS.

I can see from the dev tools that both .show and .navigation are getting transition-delay: 0s;.

In addition, the transition from show to (hide) is basically non existent in firefox, but shows in chrome.

Thanks again

jsdevtom
jsdevtom
16,963 Points

SOLVED - I was missing max-height in .navigation. The main problem was that max-height was far too big and because overflow was hidden, it appeared as though there was a delay

.navigation {
  transition: 0.5s max-height 0s;
}