我正在从一个可折叠对象切换到另一个,因为后者具有更好的功能,但作为一个缺点,它似乎更难设置样式。
我想将新的过渡动画设置为旧的样式。
这里可以看到两个按钮的代码:demo和片段
var coll = document.getElementsByClassName("oldcol");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
.oldcol {
cursor: help;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: green;
border-bottom: 1px dashed;
transition: .3s;
}
.oldcon {
padding: 0 18px;
margin: 3px 0;
max-height: 0;
overflow: hidden;
transition: .3s ease-out;
background-color: #f1f1f1;
box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
.container {
position: relative;
margin: 0em;
}
.newcon {
display: none;
padding: 0.6em;
margin: 0.5em;
background: #f1f1f1;
box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
.newcol {
cursor: help;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: green;
border-bottom: 1px dashed;
transition: .3s ease-out;
}
.newcol:focus {
pointer-events: none;
margin-bottom: 3em;
}
.newcol:focus + .newcon
{
display: block;
margin-top: -2.5em;
position: absolute;
left: 0;
right: 0;
}
.fadein {
animation: fadein 1s;
}
@keyframes fadein {
from {opacity:0}
to {opacity:1}
}
Old button: does <button class="oldcol">this</button> work?
<div class="oldcon"><p>Yes!<p/></div>
<hr>
<div class=container>
New button: does <button class="newcol">this</button><span class=newcon>Quite good</span> work?<br>
New button fadein: does <button class="newcol">this</button><span class="newcon fadein">Quite good</span> work?<br>
</div>
到目前为止我尝试了什么
- 放
transition: all 3s;
在newcon
CSS(不起作用) - 将以下类添加到
span
(并在 html 中写<span class="newcon visible hidden">
)(不起作用)
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.newcon.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
- 将以下类添加到
span
让内容淡入淡出,它有效,但我不知道如何为淡出效果做同样的事情。我认为问题是关闭按钮不需要点击它,但点击所有地方就足够了(这不是一个好的行为,如何解决?)。
.fadein {
animation: fadein 1s;
}
@keyframes fadein {
from {opacity:0}
to {opacity:1}
}
实现简单
展开/折叠过渡,例如 How can I transition height: 0; to height: auto; using CSS? 的第一个答案,但我不知道如何在我的案例中应用它。
最佳答案
这是我在评论中提出的带有 line-height
转换的工作版本。
.container {
width: 250px;
}
.col {
cursor: help;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: green;
border-bottom: 1px dashed;
}
.con {
display: block;
padding: 0 18px;
margin: 3px 0;
overflow: hidden;
transition: all .3s ease-out;
line-height: 0em;
background-color: #f1f1f1;
box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
.col:focus {
color: red;
}
.col:focus + .con
{
line-height: 1.2em;
padding: 8px 18px;
margin: 10px 0;
}
<div class="container">
This should work
<button class="col">right?</button>
<span class="con">Yes absolutely, but only with text!</span>
And it should also be responsive.
</div>
关于javascript - 按下按钮时的跨度展开/折叠过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57891717/