CSS transition doesn't work with jQuery's .toggleClass()

Question

When you click the link apply any CSS animation during show/hide toggle. The toggle works, but animation is not applied.

$('.working-hours-link').click(function(e) {
  $(this).siblings(".hours").toggleClass('hidden shown');
});

.hidden {
  background-color: #fff;
  color: #000;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  display: none;
}

.shown {
  background-color: #000;
  color: #fff;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="working-hours-link" href="#">Show working hours</a>
<br>
<div class="hours hidden">
  Sunday: 12:00 pm-6:00 pm
</div>

https://jsfiddle.net/ako6uzxt/

which kind of transition are you expecting to see? color and background are actually fading, but the display property run like a switch. Maybe do you expect an opacity transition (from 0 to 1)? — Fabrizio Calderan, Feb 11 '20 at 11:39
`CSS` transitions doesn't work with `display` properties. Here are some [alternatives](https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property) to it. — Viral, Feb 11 '20 at 11:40
Does this answer your question? [Transitions on the CSS display property](https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property) — aryan, Feb 11 '20 at 11:44

score 5 · Accepted Answer · answered Feb 11 '20 at 11:39

5

transition doesn't work for display. try to change display:none and display:block to opacity:0 and opacity:1

answered Feb 11 '20 at 11:39

Yosef Tukachinsky

5,570
1
13
29

This leaves empty white space. – user3108268 Feb 11 '20 at 12:08
so try `max-height:0` and `max-height:150px` or whatever value is the maximum for your item heights – Yosef Tukachinsky Feb 11 '20 at 12:13
This works, but mouse cursor reacts to the hidden text (while at `opacity: 0;`) on hover. – user3108268 Feb 11 '20 at 12:17
because it overflow.. set `overflow:hidden` – Yosef Tukachinsky Feb 11 '20 at 12:19

score 2 · Answer 2 · answered Feb 11 '20 at 11:39

The issue is because the transition CSS rule needs to exist on the element before the class is applied/removed from it. As such you can add that to the .hours rule. In addition you no longer need to use the vendor prefixes on transition.

Also note that you can't animate display so I used a combination of opacity and height instead.

$('.working-hours-link').click(function(e) {
  $(this).siblings(".hours").toggleClass('hidden shown');
});

.hours {
  transition: height, opacity 1s;
}

.hidden {
  background-color: #fff;
  color: #000;
  height: 0;
  opacity: 0;
}

.shown {
  background-color: #000;
  color: #fff;
  height: 20px;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="working-hours-link" href="#">Show working hours</a>
<br>
<div class="hours hidden">
  Sunday: 12:00 pm-6:00 pm
</div>

The toggled item is not going to be fixed height because of different amount of content for each sibling. — user3108268, Feb 11 '20 at 12:11
so just replace `height` with `max-height` and put the value of most availible tall item — Yosef Tukachinsky, Feb 11 '20 at 12:15

score 0 · Answer 3 · answered Feb 11 '20 at 11:41

0

In css display: none and display: block the transition will not work. because the hidden file is not in html by default.. after click the button the files will show.. replace of display none we can use opacity:0; please remove the display: none and display:block

css

.hidden {
  opacity: 0; 
  visibility: hidden;
}
.shown {
  opacity: 1;
  visibility:visible;
}

answered Feb 11 '20 at 11:41

Manikandan2811

831
4
9

@G-Cyr yes ofcourse.. But in IE old version sometimes, visibility:hidden is must.. – Manikandan2811 Feb 11 '20 at 11:46
`visibility` leaves empty space. – user3108268 Feb 11 '20 at 12:09
In case ther e is an anchor tag inside the opacity:0 div.. Its not showing but the anchor tag click will work.. i mean the functionality will work.. so we can add visibility:hidden – Manikandan2811 Feb 13 '20 at 06:41

score 0 · Answer 4 · answered Feb 11 '20 at 11:51

0

Please add this Code

.hours{display:none;background-color:#000;color:#fff;}

$('.working-hours-link').click(function(e) {
    $(this).siblings(".hours").toggleClass('hidden');
});
$('.working-hours-link').click(function(e) {
    $(this).siblings(".hours").slideToggle();
});

answered Feb 11 '20 at 11:51

Mehul Davara

321
2
4

This kind of works, but gets really clunky, show animation is fade while hide is slide. – user3108268 Feb 11 '20 at 12:15

CSS transition doesn't work with jQuery's .toggleClass()

4 Answers4