nicht angemeldet
Hi,
Ich kann den Vorteil die Höhe mit Javascript zu setzen gegenüber von .slideUp/Down nicht sehen.
Hm, aufgrund der padding/margin Berechnung sind grade die häufig unschön und neigen zu Hupfern, man muss also auch hier manipilieren - beispielsweise per js die Weite ermitteln und fest setzen
Das kann sein.
Hier hat man aber wenigstens die Möglichkeit das zu korrigieren.
Zumal ich bei der Javascript-Lösung sogar eine x-beliebige timing-function haben kann, nicht nur die, die mit cubic-bezier() oder steps() möglich sind.
für ein Aufsliden soviel Aufwand? Ich finde die Transitions da echt charmant einfach...
Wo siehst du da viel Aufwand?
Wenn dir die Standard-Timing-Function "swing" nicht passt _kannst_ du eine andere nehmen.
Mit Transitions bist du allgemein beschränkte und in dem auf- und zuklappen Fall bleibt eigentlich nur linear.
Vielleicht wende ich die Transition ja nur falsch an, erklär mir bitte jemand was ich da noch groß verbessern könnte:
<!DOCTYPE html>
<title></title>
<style>
[code lang=css]article {
cursor: pointer;
}
div {
overflow: hidden;
border: 1px solid #888;
background: #eee;
padding: 1em;
margin: 1em;
}
.withoutJS div {
-webkit-transition: all .3s ease;
max-height: 999px;
}
.withoutJS.collapsed div {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom-width: 0;
margin-top: 0;
margin-bottom: 0;
}
</style>
<article class="withJS">
<h1>.slideToggle()</h1>
<div>
Foo<br/>
Bar<br/>
Baz
</div>
</article>
<article class="withoutJS">
<h1>CSS Transition</h1>
<div>
Foo<br/>
Bar<br/>
Baz
</div>
</article>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$('.withJS').on('click', function() {
$('div', $(this).toggleClass('collapsed')).slideToggle();
});
$('.withoutJS').on('click', function() {
$(this).toggleClass('collapsed');
});
});
</script>
[/code]
~dave
Gunnar Bittersmann