CODEWITHSUNDEEP
jquerycsscss-transitions
Gus
Gus

Reputation: 953

hide/show element with add/removeClass with CSS transition

I'd like to hide/show an element with addClass and removeClass function animation with CSS transition. I tried in this way but when I addClass "active" display not shown.

.hidden {
  display: none;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}

.active {
  transition: display .5s ease;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}

#test {
  width: 100px;
  height: 40px;
  background: red;
}

-

$('#btn').on('click', function(){
   $('#test').toggleClass('active');
});

-

<div id="test" class="hidden">Hallo!</div>
<input type="button" id="btn" value="show/hide">

jsfiddle

How could I do it? thank you

Upvotes: 6

Views: 18080

Answers (7)

Gerry
Gerry

Reputation: 96

It's a bit late for this thread but this may be useful. You cannot transition the display but you can transition z-index. So, in CSS, set your element you want to display with opacity 0, and set z-index to -1 so it doesn't show regardless of display value. When you want to display the element add a class that transitions to opacity 1 and z-index > 0:

For example:

#myElement {
    z-index: -1;
    opacity:0;
    transition: all 2s;
}
#myElement.showme{
    z-index: 99;
    opacity:0;
    transition: all 2s;
}

to show/hide it use javascript to add or remove class showme (jQuery below):

$('#myElement').addClass('showme');  // fade myElement in
...
$('#myElement').removeClass('showme'); // fade out myElement

Upvotes: 0

avnaveen
avnaveen

Reputation: 562

You can achieve the same effect without using such long css

All you have to do is to add a jquery

$('#btn').on('click', function () {
    $("#test").fadeToggle("slow", "linear")
});

check this fiddle

Upvotes: 0

ketan
ketan

Reputation: 19341

Here is another way using CSS:

It is not perfect you want but nearer to that:

.hidden {
    display:none;
     opacity:0;

}

.active {
    display: block;
    opacity:1;
  -webkit-animation-name: fadeIn;
-webkit-animation-duration: .5s;
animation-name: fadeIn;
animation-duration: .5s;
}

#test {
    width: 100px;
    height: 40px;
    background: red;
}

@-webkit-keyframes fadeIn {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0.3; }
60% { opacity: 0.5; }
80% { opacity: 0.9; }
100% { opacity: 1; }
}

@keyframes fadeIn {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0.3; }
60% { opacity: 0.5; }
80% { opacity: 0.9; }
100% { opacity: 1; }
}

Check Fiddle.

Hope it will help.

Upvotes: 2

Rohit Arora
Rohit Arora

Reputation: 2252

Try this:

$('#btn').on('click',function(){
var class= $('#test').attr('class').trim();
if(class === "hidden")
{
 $('#test').removeClass('hidden');
 $('#test').addClass('active');
}
else
{
 $('#test').removeClass('active');
 $('#test').addClass('hidden');
}
});

Upvotes: 0

hamed
hamed

Reputation: 8033

I think this is better to solve it with jquery, not css transition. If you just want to show and hide an element, simply you can use jquery fadeIn and fadeOut without any css rule.

$('#btn').on('click', function(){
   $('#test').fadeToggle("slow");
});

Here is the updated fiddle.

For more information about fadeToggle, refer to this link.

Upvotes: 5

Venkata Krishna
Venkata Krishna

Reputation: 1776

You will have to remove the existing class hidden from the div, since hidden has display none which stops it from displaying.
Add this in the JQuery inside onclick of the Button.

 $('#test').removeClass('hidden');

Upvotes: 2

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

You need to add some css code into your .active class, put this into css section, here is the updated fiddle :

display : block;

Upvotes: 2

Related Questions