6

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

Gus
  • 913
  • 2
  • 15
  • 30
  • 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 Jan 21 '16 at 22:25
  • This might also be helpful: https://stackoverflow.com/questions/7302824/ – J0ANMM Aug 12 '17 at 11:55

7 Answers7

4

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.

hamed
  • 7,939
  • 15
  • 60
  • 114
2

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

display : block;
Norlihazmey Ghazali
  • 9,000
  • 1
  • 23
  • 40
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');
Venkata Krishna
  • 1,768
  • 2
  • 14
  • 21
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.

ketan
  • 19,129
  • 42
  • 60
  • 98
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');
}
});
Rohit Arora
  • 2,246
  • 2
  • 24
  • 40
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

avnaveen
  • 562
  • 2
  • 4
  • 10
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
Gerry
  • 96
  • 1