标签中的 CSS 过渡

Posted 2023-03-06

【中文标题】标签中的 CSS 过渡

【英文标题】：CSS Transitions in Tabs

【发布时间】：2017-05-04 22:01:21

【问题描述】：

为什么我设置的过渡没有动画？我希望由于 animate 类被删除然后重新添加到元素中，因此一旦切换标签，它就会重新设置动画。

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

谢谢，

贾斯汀

$('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>

【参考方案1】：

因为你使用display: none，所以删除它并改用opacity: 0

$('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>

【讨论】：

这在技术上回答了问题，但我想设置一个标签。执行此解决方案意味着选项卡 1 仍然存在，您只是看不到它。

@JustinBreen 通过使用position: absolute，您可以将它们从流程中移除......尽管在这种情况下这是否是一个好的解决方案我不能说，因为我需要知道整个标记结构，在这些选项卡之前和之后

好吧，这感觉很老套。然后我必须为我的标签集定义一个特定的高度。一旦对象恢复正常显示，希望能够使用 display: none 的 CSS 过渡。我实际上并没有尝试转换 display 属性。我只想让元素按预期再次运行它的过渡。

@JustinBreen 这类过渡/元素替换通常需要这样，因为它们在顶部/相互下方，并且（大多数情况下）不能用正常的流动元素很好地完成

有道理。除非有人进来显示使用 display none 的方法，否则将使其被接受。