kkapsner
Super Moderator
Das Ganze funktioniert nicht mit CSS, da "auto" nicht von den transitions erkannt wird.
Du kannst aber mit CSS-Transitions arbeiten, wenn du die Höhe dynamisch mit JS ausliest:
PS: Nur für eine Animation React einzubauen scheint mir ein wenig overkill zu sein.
Du kannst aber mit CSS-Transitions arbeiten, wenn du die Höhe dynamisch mit JS ausliest:
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
.expander {
border: 1px solid black;
}
.expander button + div {
transition-duration: 0.5s;
transition-property: height;
height: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="expander"><button>expand</button><div></div></div>
<div class="expander"><button>expand</button><div></div></div>
<div class="expander"><button>expand</button><div></div></div>
<div class="expander"><button>expand</button><div></div></div>
<div class="expander"><button>expand</button><div></div></div>
<div class="expander"><button>expand</button><div></div></div>
<script type="text/javascript">
Array.prototype.slice.call(document.querySelectorAll(".expander button")).forEach(function(button){
var text = "";
var chars = "qwertzuiopasdfghjklyxcvbnm 1234567890";
for (var i = 1e3; i > 0; i -= 1){
text += chars.charAt(Math.floor(Math.random() * chars.length));
}
var next = button.nextElementSibling;
next.innerHTML = text;
var transitionAim = "";
next.addEventListener("transitionend", function(){
next.style.height = transitionAim;
});
button.addEventListener("click", function(){
if (this.innerHTML !== "collapse"){
transitionAim = "auto";
next.style.height = next.scrollHeight + "px";
this.innerHTML = "collapse";
}
else {
next.style.height = transitionAim = next.clientHeight + "px";
window.setTimeout(function(){
next.style.height = transitionAim = "";
}, 50);
this.innerHTML = "expand";
}
});
});
</script>
</body>
</html>PS: Nur für eine Animation React einzubauen scheint mir ein wenig overkill zu sein.
)