当项目显示时（单击时），如果高度比初始值更高，则动画高度（自动）。
当项目显示时（单击时），如果高度比初始值更高，则动画高度（自动）。
这个问题已经有回答了:
我有一个带有图标的列表，当单击图标时，文本将被显示。这个效果可行——只需使用不透明度并切换类名。但是问题是，如果文本跨越一行，您会在每个图标之间获得空间。
我尝试在none/block之间切换，这确实将空间折叠...但是内容会\'跳\'进视图。
一旦使用.visible显示内容，并且淡入淡出，是否有一种方式可以平滑地动画化高度并将其余内容向下推动？
$('.list-numbers--reveal li').click(function() {
$(this).toggleClass('visible');
});
.list-numbers {
counter-reset: li;
line-height: 1.25;
list-style: none;
}
.list-numbers li {
display: flex;
min-height: 24px;
margin-bottom: 12px;
position: relative;
text-decoration: none;
text-shadow: none;
}
.list-numbers li:before {
background: black;
border-radius: 100%;
color: white;
content: counter(li);
counter-increment: li;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 14px;
height: 24px;
line-height: 14px;
margin-right: 8px;
position: relative;
top: -2px;
width: 24px;
}
.list-numbers--reveal li {
cursor: pointer;
}
.list-numbers--reveal li span {
opacity: 0;
transition: opacity .12s;
}
.list-numbers--reveal li.visible span {
opacity: 1;
}
-
- Lorem
-
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
- Duis aute irure
admin 更改状态以发布 2023年5月23日
Jquery有一些方法可以帮助实现这个，例如.slideDown()和.one()（这是一个事件监听器，只执行一次）。
$('.list-numbers--reveal li').click(function() {
const $span = $(this).find('span');
if ($span.hasClass('visible')) {
$span.removeClass('visible').one('transitionend', function() {
$span.slideUp();
});
} else {
$span.slideDown(400, function() {
$(this).addClass('visible');
})
}
});
.list-numbers {
counter-reset: li;
line-height: 1.25;
list-style: none;
}
.list-numbers li {
display: flex;
min-height: 24px;
margin-bottom: 12px;
position: relative;
text-decoration: none;
text-shadow: none;
}
.list-numbers li:before {
background: black;
border-radius: 100%;
color: white;
content: counter(li);
counter-increment: li;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 14px;
height: 24px;
line-height: 14px;
margin-right: 8px;
position: relative;
top: -2px;
width: 24px;
}
.list-numbers--reveal li {
cursor: pointer;
}
.list-numbers--reveal li span {
display: none;
opacity: 0;
transition: opacity .12s;
}
.list-numbers--reveal span.visible {
opacity: 1;
}
- Lorem
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure
为了实现所需功能，您可以使用max-height属性。请注意，此处需要使用max-height，而不是height，因为height: auto无法进行动画处理。
将max-height设置为大约一行高度的设置（以避免动画开始前的延迟），并在应用类时将其设置为比内容更大得多的值。
这里是一个有效的示例-请注意，我放慢了动画速度以使效果明显：
$('.list-numbers--reveal li').click(function() {
$(this).toggleClass('visible');
});
.list-numbers {
counter-reset: li;
line-height: 1.25;
list-style: none;
}
.list-numbers li {
display: flex;
min-height: 24px;
margin-bottom: 12px;
position: relative;
text-decoration: none;
text-shadow: none;
}
.list-numbers li:before {
background: black;
border-radius: 100%;
color: white;
content: counter(li);
counter-increment: li;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 14px;
height: 24px;
line-height: 14px;
margin-right: 8px;
position: relative;
top: -2px;
width: 24px;
}
.list-numbers--reveal li {
cursor: pointer;
}
.list-numbers--reveal li span {
opacity: 0;
max-height: 25px;
display: block;
transition: all 1s ease;
transition-property: opacity max-height;
}
.list-numbers--reveal li.visible span {
opacity: 1;
max-height: 100px;
}
- Lorem
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure