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 trialRobin Malhotra
14,883 PointsReverse Transition?
Is there any way to get the header to smoothly transition back from black to white? I tried doing this:
.header {
background-color: white;
transition:1s;
}
but to no avail.
3 Answers
Brian Polonia
25,139 PointsYour question has to do with CSS and not Javascript.
should probably look something like this:
.header {
height: 100px; /*the dimension are arbitrary - use your dimensions*/
width: 500px;
background-color:black; /*initial color should be set to black*/
transition: all 1s;
}
/*when the state changes (for example below it changes on hover)
then the above transition rule will take effect. It will transition to
white on hover and transition back to black when you hover off*/
.header:hover{
background-color:white;
}
Hope this helps.
- bp
Robin Malhotra
14,883 PointsI found an easier way.
$(".header").on('sticky-end',function(){
console.log("asdfsd");
$("h1.description").html("We build apps");
/* $("h1.description").css("background-color","white"); */
$("div.frame,div.green").css("background-color", "red");
$("div.frame,div.green").css("transition", "1s");
$("div h5").html("Wanna work with us");
});
Brian Polonia
25,139 PointsBased on your original question... That actually isn't easier than just doing it in CSS. Look at how simple this code is.
.header {
background-color:black;
transition: all 1s;
}
.header:hover{
background-color:white;
}
Thats all you need to accomplish what you asked in your question.
But hey, whatever works for you.
All the best,
- bp
Paul Jackson
8,943 PointsThe CSS posted here doesn't do make the transition go back from black to white though. To transition back to the original color all you're supposed to have to do is put a transition in the original state like so:
.header {
background: white;
transition: 1s;
}
.is-sticky .header {
background: black;
transition: 1s;
}
But for some reason, that doesn't work... What am I missing?
Leon Segal
14,754 PointsIs it because we are only transitioning the colour?
The height of the header changes to zero when the is-sticky class is lost, maybe the code is working, you just can't see it?