gpt4 book ai didi

javascript - 如果元素显示(单击)高于初始值,则动画高度(自动)

转载 作者:行者123 更新时间:2023-12-05 09:26:41 26 4
gpt4 key购买 nike

<分区>

我有一个带有图标的列表,单击图标时会显示文本。这有效 - 只需使用 opacity 并切换一个类。但问题是,如果文本换行,您会在每个图标之间留出空间。

我试过在 display: none/block 之间切换,这确实会折叠空间……但随后内容会“跳”入 View 。

有没有一种方法可以在内容显示为 .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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<ol class="list-numbers list-numbers--reveal">
<li><span>Lorem</span></li>
<li><span>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.</span></li>
<li><span>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.</span></li>
<li><span>Duis aute irure</span></li>
</ol>

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com