标签中的 CSS 过渡答案

【问题标题】：CSS Transitions in Tabs标签中的 CSS 过渡
【发布时间】：2017-05-04 22:01:21
【问题描述】：

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

谢谢，

贾斯汀

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

【问题讨论】：

标签： jquery css animation css-transitions

【解决方案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 的方法，否则将使其被接受。