CSS Transitions in Tabs

Question

Why does the transition I set up not animate? I would expect that since the class animate is being removed and then re-added to the element then it would re-animate once switching tabs.

https://jsfiddle.net/jstn/Lt6qfv7s/

Thank you,

Justin

$('button').on('click', function () {
 var tab = $(this).attr('data-target');

 $('.tab').removeClass('active');
 $(tab).toggleClass('active');
 
 $('.content').removeClass('animate');
 $(tab).find('.content').toggleClass('animate');
});

.tab:not(.active) { display: none; }

.content { transition: 3s all ease-out; }

.content.animate { opacity: .3; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-target=".tab-1">Tab #1</button>
<button data-target=".tab-2">Tab #2</button>

<div class="tab tab-1">
 <div class="content">This is Tab #1</div>
</div>

<div class="tab tab-2">
 <div class="content">This is Tab #2</div>
</div>

score 1 · Accepted Answer · answered Dec 19 '16 at 19:28

1

Because you use display: none, remove that and use opacity: 0 instead

$('button').on('click', function() {
  var tab = $(this).attr('data-target');

  $('.content').removeClass('animate');
  $(tab).find('.content').toggleClass('animate');
});

.content {
  opacity: 0;
  transition: 3s opacity ease-out;
}
.content.animate {
  opacity: .3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-target=".tab-1">Tab #1</button>
<button data-target=".tab-2">Tab #2</button>

<div class="tab tab-1">
  <div class="content">This is Tab #1</div>
</div>

<div class="tab tab-2">
  <div class="content">This is Tab #2</div>
</div>

answered Dec 19 '16 at 19:28

Asons

84,923
12
110
165

This technically answers the questions, but I want to have a tab set up. Doing this solution means tab 1 is still there you just can't see it. – Justin Breen Dec 19 '16 at 19:30
@JustinBreen By using `position: absolute` you can take them out of flow ... though whether that is a good solution in this case I can't really say, as I need to know the whole markup structure, both before and after these tabs – Asons Dec 19 '16 at 19:37
Ok that feels hacky though. Then I'd have to define a specific height for my tabset. Was hoping to be able to use CSS transitions with `display: none` once the object is back to displaying normal. I'm not actually trying to transition the `display` property. I just want the element to run it's transition again as expected. – Justin Breen Dec 19 '16 at 20:05
@JustinBreen These kind of transition/element replacements often need that, as they are on-top/below one another, and that can't (most of the time) be done nicely with normal flowed elements – Asons Dec 19 '16 at 20:09
Makes sense. Will make this accepted unless someone comes in to show a method using display none. – Justin Breen Dec 19 '16 at 20:22
@JustinBreen Thanks .. and if someone does, please drop me a note because I want that too :) – Asons Dec 19 '16 at 20:24
There is a need to use display the content *alternatively* though so that one content replaces the other while the other and there is no gap between the tabs and the *second content*. This does not seem to work, strangely. – Razvan Zamfir Apr 24 '18 at 10:35
@RazvanZamfir If you want the _2nd content `div`_ to be positioned at the same position as the first, you need to use e.g. `position: absolute` – Asons Apr 24 '18 at 10:41
How about displaying the "active" content _instantly_ and setting its opacity to 1 _gradually_? – Razvan Zamfir Apr 24 '18 at 10:46
@RazvanZamfir If that makes it work for you, then do it like that. – Asons Apr 24 '18 at 10:53
If someone needs it to work using `display` do to some limitations he can use the next solution: https://stackoverflow.com/a/17191375/469161 – Roy Shoa Dec 05 '19 at 12:07

CSS Transitions in Tabs

1 Answers1