javascript - CSS 转换不适用于 jQuery 的 .toggleClass()

Question

这个问题已经有答案了:

Transitions on the CSS display property (38 个回答)

已关闭 3 年前。

当您单击链接时，在显示/隐藏切换期间应用任何 CSS 动画。切换有效，但未应用动画。

$('.working-hours-link').click(function(e) {
  $(this).siblings(".hours").toggleClass('hidden shown');
});

.hidden {
  background-color: #fff;
  color: #000;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  display: none;
}

.shown {
  background-color: #000;
  color: #fff;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="working-hours-link" href="#">Show working hours</a>
<br>
<div class="hours hidden">
  Sunday: 12:00 pm-6:00 pm
</div>

https://jsfiddle.net/ako6uzxt/

Answer 1

transition 不适用于display。尝试将 display:none 和 display:block 更改为 opacity:0 和 opacity:1