hide/show element with add/removeClass with CSS transition

Question

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

You can animate opacity, but you can't animate display. You should animate opacity first, and at the end of the animation, change display property. — Ignacio Segura
– Ignacio Segura, Commented Jan 21, 2016 at 22:25
This might also be helpful: stackoverflow.com/questions/7302824 — J0ANMM
– J0ANMM, Commented Aug 12, 2017 at 11:55

hamed · Accepted Answer · 2015-03-20 09:05:41Z

5

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.

edited Mar 20, 2015 at 9:05

answered Mar 20, 2015 at 8:56

hamed

8,04517 gold badges66 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Norlihazmey Ghazali · Accepted Answer · 2015-03-20 08:53:33Z

2

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

display : block;

answered Mar 20, 2015 at 8:53

Norlihazmey Ghazali

9,0701 gold badge26 silver badges42 bronze badges

1 Comment

hamed Over a year ago

Your solution, hides and shows div without any transition.

Venkata Krishna · Accepted Answer · 2015-03-20 08:55:29Z

2

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');

answered Mar 20, 2015 at 8:55

Venkata Krishna

1,7762 gold badges14 silver badges21 bronze badges

1 Comment

Gus Over a year ago

If I remove class hidden I do not have the transition

ketan · Accepted Answer · 2015-03-20 09:18:48Z

2

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.

edited Mar 20, 2015 at 9:18

answered Mar 20, 2015 at 9:11

ketan

19.4k42 gold badges68 silver badges107 bronze badges

Comments

Rohit Arora · Accepted Answer · 2015-03-20 09:13:39Z

0

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');
}
});

answered Mar 20, 2015 at 9:13

Rohit Arora

2,2622 gold badges28 silver badges40 bronze badges

Comments

avnaveen · Accepted Answer · 2015-03-20 09:27:34Z

0

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

answered Mar 20, 2015 at 9:27

avnaveen

5622 gold badges4 silver badges10 bronze badges

Comments

Gerry · Accepted Answer · 2016-04-14 23:44:41Z

0

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

answered Apr 14, 2016 at 23:44

Gerry

961 bronze badge

1 Comment

J0ANMM Over a year ago

at #myElement.showme you mean opacity:1, don't you?

Collectives™ on Stack Overflow

hide/show element with add/removeClass with CSS transition

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related