How to use CSS3 transitions

Question

I have the following HTML:

<div id="welcome-content">
 // Code
</div>
<div id="configure-content" style="display:none">
 // Code
</div>

And (working) jquery that toggles between them:

$('.back-welcome').click(function(){
$('#welcome-content').toggle();
$('#configure-content').toggle();        
});

I want to use CSS3 to create a fade effect as I toggle between them. I have tried the following:

#welcome-content, #configure-content{
    -webkit-transition: all 400ms;
    -o-transition: all 400ms;
    -moz-transition: all 400ms;
    -ms-transition: all 400ms;
    -khtml-transition: all 400ms;
}

However, no animation takes place. What am I doing wrong?

Answer 1

The property display that assign the method toggle () can't be animated with the CSS transitions. Maybe you want to look at fadeIn() and fadeOut().

Edit

I've found this another method fadeToggle() i don't know much about it but you can search and use this:

$('.back-fade').click(function(){
  $('#welcome-content').fadeToggle(2000);
  $('#configure-content').fadeToggle(2000);        
});

Check this demo http://jsfiddle.net/8urRp/14/ *

---

*_{I made the divs with absolute position to keep them on the same space}

Answer 2

There can only be a transition for a CSS property from one value to another. For a fade transition, the opacity should go from 0 to one.

CSS

.foo {
   opacity: 0;
   transition: all 400ms;
}
.foo.active {
   opacity: 1
}

JavaScript

$('.mybtn').click(function() { $('.foo').toggleClass('active'); })

See this fiddle

---

Now there is an annoying thing with showing an hiding elements using with CSS transitions. The transition from display: none to display: block is instant, canceling out all other transitions.

There are several ways around this. First you can just use the jQuery fadeOut function. If you do really insist in using CSS transitions have a look at this answer.