Question

为什么我设置的转换不是动画？我希望，因为类animate被删除然后重新添加到元素，然后它会在切换标签后重新生成动画。

谢谢，

贾斯汀

＆＃13;

$('button').on('click', function () {
	var tab = $(this).attr('data-target');

	$('.tab').removeClass('active');
	$(tab).toggleClass('active');
	
	$('.content').removeClass('animate');
	$(tab).find('.content').toggleClass('animate');
});

＆＃13;

.tab:not(.active) { display: none; }

.content { transition: 3s all ease-out; }

.content.animate { opacity: .3; }

＆＃13;

<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>

＆＃13;

Answer 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>

选项卡中的CSS转换

1 个答案: