CSS transition不适用于jQuery的.toggleClass()

Question

当您单击链接时，在显示/隐藏切换期间应用任何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

Answer 2

问题是因为在应用/删除类之前，transitionCSS 规则需要存在于元素上。因此，您可以将其添加到.hours规则中。此外，您不再需要在transition上使用供应商前缀。

另请注意，您无法对display进行动画处理，因此我使用了opacity和height的组合。

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

.hours {
transition: height, opacity 1s;
}
.hidden {
background-color: #fff;
color: #000;
height: 0;
opacity: 0;
}
.shown {
background-color: #000;
color: #fff;
height: 20px;
opacity: 1;
}

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

Answer 3

在 css 显示：无和显示：阻止中，过渡将不起作用。 因为默认情况下隐藏文件不在 HTML 中.. 单击按钮后，将显示文件.. 替换显示 无 我们可以使用 不透明度：0; 请删除显示：无和显示：块

.css

.hidden {
opacity: 0; 
visibility: hidden;
}
.shown {
opacity: 1;
visibility:visible;
}

Answer 4

请添加此代码

.hours{display:none;background-color:#000;color:#fff;}
$('.working-hours-link').click(function(e) {
$(this).siblings(".hours").toggleClass('hidden');
});
$('.working-hours-link').click(function(e) {
$(this).siblings(".hours").slideToggle();
});