Semantic-ui: [Tab] Add animation (Transition) to Tab module

[ikourfaln]

Hi, this an Enhancement issue.
There is no animation when you switch between Tabs !!
Thanx all for your work ;)

[UnrulyNatives]

Hi ikourfaln,

have you found any solution for the task? I also want transition for tabbed layout.
I tied to implement it, but I have failed.

Peter

[iPaoo]

Same… adding transition between tab should be added as valuable enhancement!

Does anybody found a solution?

Greg

[olszak94]

Add transition fade in classes.

<div class="ui tabular menu">
  <div class="item" data-tab="tab-name">Tab Name</div>
  <div class="item" data-tab="tab-name2">Tab Name 2</div>
</div>
<div class="ui transition fade in tab" data-tab="tab-name">
  <!-- Tab Content !-->
</div>
<div class="ui transition fade in tab" data-tab="tab-name2">
  <!-- Tab Content !-->
</div>

And initialize it with $('.tabular.menu .item').tab();

jsfiddle

[iPaoo]

@olszak94 can we transition slide and pass any argument like delay?

[UnrulyNatives]

@ZeGregg yeah, I would need that too.
BTW @olszak94 's jsfiddle doesn't work for me. strange!

[olszak94]

updated jsfiddle
I don't know about arguments, but i'm pretty sure you can do that with CSS animation.

All animations are inside of transition.less file.

[PavanKu]

+1 to this enhancement

[Abhyudhey]

I tried adding animation on tab switch using semantic transitions property.
@ikourfaln Maybe this will help you achieve what you are looking for: Fiddle

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[ikourfaln]

this is just a comment to make an activity!! so don't close it Bot.