Hi,
Vielleicht wende ich die Transition ja nur falsch an, erklär mir bitte jemand was ich da noch groß verbessern könnte:
mein Vorschlag sähe so aus, jetzt mal bewusst ohne irgendwelche frameworks. Vorteil gegenüber "klassisch" imho: ich erspare mir die setTimeout-Animation bzw. die Berechnung der margins für jeden Durchlauf.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Sixt</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="JW">
<meta name="description" content="Sixt">
<meta name="keywords" content="Sixt">
<style type="text/css">
body {
font: normal normal normal 12px verdana, arial, helvetica, sans-serif;
}
* {
padding: 0;
margin: 0;
}
#main {
padding: 20px;
}
#foo {
overflow: hidden;
}
#foo p {
margin: -9999px 0 0 0;
padding: 10px 0 10px 0;
}
#foo .foop {
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
}
#foo.open p {
margin-top: 0 !important;
}
</style>
<script type="text/javascript">
window.addEventListener("load", init_trans, false);
/**
* calculate p's hight and set
* top-marin depending on height
* now set css-class containing transition
* * to av-id top margin causes animation
*/
function init_trans(e) {
var foop = document.getElementById("foo").getElementsByTagName("p")[0]
foop.style.marginTop = (foop.offsetHeight * -1) + "px";
foop.className = "foop";
}
/**
* toggle class name
* @return {bool} false
*/
function toggle() {
var el = document.getElementById("foo");
el.className = (el.className == "open")? "collapsed" : "open";
return false;
}
</script>
</head>
<body>
<div id="main">
<a href="#foo" onclick="return toggle()">Mach mal auf...</a>
<div id="foo">
<p>
foo<br />
foo<br />
foo<br />
foo<br />
bar<br />
foo<br />
foo<br />
foo<br />
foo<br />
foo<br />
foo<br />
foo<br />
batz<br />
foo<br />
foo<br />
lala<br />
</p>
</div>
</div>
</body>
</html>
Gruesse, Joachim
Am Ende wird alles gut.