Animierter CSS-Übergang auf einem Registerkartenelement

Question

Ich habe ein jQuery-Tabs-Element mit unterschiedlichen Tab-Höhen. Das äußere div hat eine dynamische Höhe, aber ich möchte, dass es sich leicht ändert, wenn die inneren Elemente Tabs wechseln.

Mein aktueller CSS ist:

.parent{ 
    width:500px; 
    background:green; 
    padding:20px; 
    transition:all 1s; 

} 

.tab1{ 
    width:300px; 
    height:100px; 
    background:red; 
} 

.tab2{ 
    width:300px; 
    height:500px; 
    background:blue; 
    display:none; 
} 

.parent button{ 
    display:inline-block; 
    vertical-align:middle; 
} 

Diese Geige zeigt das Verhalten: https://jsfiddle.net/mh5b91gx/

Ich habe versucht, mit min-height und max-height konnte es aber nicht getan. Kannst du mir helfen?

Answer 1

Sie können organische Tabs auf CSS Tricks überprüfen: https://css-tricks.com/organic-tabs/.

Answer 2

Die nächste Sache, die ich ohne HTML ändern könnte, ist: http://codepen.io/BenCodeZen/pen/rePLpP, aber es ist janky aus der Perspektive eines Benutzers und nicht etwas, was ich empfehlen würde.

$('#tab1').on('click', function(event) { 
    $('.tab2').slideUp(400); 
    $('.tab1').delay(400).slideDown(); 
    /* Act on the event */ 
}); 


$('#tab2').on('click', function(event) { 
    $('.tab1').slideUp(400); 
    $('.tab2').delay(400).slideDown(400); 
    /* Act on the event */ 
}); 

Das Hauptproblem mit Ihrem Code ist, dass Sie ganze Divs im Prozess auslagern. Dies bedeutet, dass Sie keinen einheitlichen Container haben, um reibungslos in die Höhe zu wechseln. Der erste Schritt wird definitiv Ihre HTML-Struktur ändern, um ein einzelnes Inhalts-Div zu haben, das JavaScript oder jQuery verwendet, um den Inhalt zu ändern.

Hier ist ein Beispiel dafür, was es aussehen könnte:

<div class='parent'> 

    <button id="tab1">Tab1</button> 
    <button id="tab2">Tab2</button> 

    <div class="content"> 
    <div id="tab1-content" class="tab-content">...</div> 
    <div id="tab2-content" class="tab-content">...</div> 
    </div> 

</div> 

Ich würde auf jeden Fall empfehlen einen Blick auf die Bio-Tabs Artikel, der @Asta nehmen, aber lassen Sie mich wissen, wenn Sie weitere Fragen haben!

Answer 3

Sie können dies versuchen:

$('#tab1').on('click', function(event) { 

    $('.tab2').hide('slow'); 
    $('.tab1').show('slow'); 
    /* Act on the event */ 
}); 

$('#tab2').on('click', function(event) { 

    $('.tab1').hide('slow'); 
    $('.tab2').show('slow'); 
    /* Act on the event */ 
});