Rozbudowy Div z przejściem w CSS

Question

Na górze mojej strony znajduje się div, zawierający tekst nagłówka, który pod numerem mouseenter powinien zostać rozwinięty (w pionie), aby odsłonić mniejszy tekst. Następnie, po mouseleave, powinien się wycofać. Jest to trudniejsze niż się wydaje ...

Rozwiązanie musi:

1. Go z wysokości, aby pasowały tylko nagłówek, do wysokości, aby dopasować cały tekst.
2. Przejście z jednej na drugą.
3. Spróbuj użyć czystego CSS.
4. Rozszerzanie animacji wstrzymuje się po opuszczeniu myszy i odwrotnie (domyślnie w CSS, ale nie w jQuery).

Próbowałem:

1. Korzystanie :hover w moim arkusza stylów, aby zmienić od ustalonej wartości piksela, aby auto, jak widać w this question (ale w kopalni jest czysty CSS). To nie było przejście.
2. Użycie ustawionej wysokości po rozwinięciu, która nie działa w przypadku różnych rozmiarów rzutni.
3. Korzystanie z max-height i rozszerzenie go do czegoś większego niż rzeczywisty rozszerzony div otrzymają, jak widać w this question. Oznaczało to, że przejścia nie działają poprawnie i wyglądają inaczej na różnych urządzeniach.
4. Za pomocą wartości pikseli w trybie auto, aby utworzyć przejście, jak widać w this question, ale animacja musi zakończyć się przed rozpoczęciem następnego, co oznacza, że ​​seria animacji może kontynuować przez długi czas po mysz użytkownika, jeśli jest daleko od urządzenia div.

Zobacz wszystkie cztery powyższe przykłady here.

Jak powiedziałem, czysty CSS byłby idealny, ale jeśli nie byłoby to możliwe, byłbym w porządku z JavaScriptem (i wolę jQuery).

Dzięki! :)

Answer 1

nie jestem świadomy wszelkich czystego roztworu CSS dla tego - przejście wartości auto jest coś specyfikacja nie zawierała; Myślę, że była to nawet wyraźna decyzja oparta na tym, że mogą pojawić się problemy z wdrożeniem.

Ale dla "prostego" rozwiązania jQuery, po prostu owinąłbym zawartość akapitu w dodatkowy zakres, ustaw początkową wysokość akapitu na 0 i przepełnienie: ukryte, pozostaw przejście na wysokość w miejscu - a następnie pozwól jQuery robi tylko jedną rzecz, odczytuje wysokość elementu span, ustala tę wysokość dla akapitu, a następnie ustawia ją ponownie na 0, aby wyciszyć tekst ponownie.

.details { 
    height: 0; 
    margin: 0; 
    overflow: hidden; 
    transition: height 1s; 
} 

 

$("div").mouseenter(function() { 
    $(this).find('p').css('height', $(this).find('span').height()); 
}) 

$("div").mouseleave(function() { 
    $(this).find('p').css('height', 0); 
}) 

ten sposób, CSS nadal robi „dźwiganie ciężarów” manipulacyjnych zmianę wysokości za pomocą transition (to potęga powinna być zoptymalizowana w przeglądarkach) i jQuery/JavaScript jest używane tylko, aby nadać mu mały "szturchańca", który musi wiedzieć, co robić. (Całkiem pewny, że jQuery robi to samo wewnętrznie i obecnie z animate(), jeśli przeglądarka go obsługuje - dodatkową korzyścią byłoby to, że jQuery zajmie się wersją awaryjną, gdyby naprawdę stara przeglądarka nie obsługiwała transition; w moim rozwiązaniu wysokość po prostu zmienić natychmiast, bez żadnego przejścia.)

https://jsfiddle.net/ypwu9n0g/7/

Proszę zauważyć, że w tym przykładzie, metoda jest taka sama dla wszystkich czterech elementów, a nie przeszkadza, aby zmienić treść tekstu ;-)

Answer 2

Spróbuj użyć css:hover

[id^="title"] { 
    height: 1em; 
    overflow: hidden; 
    -webkit-transition: height 1s; 
    /* Transitions not working */ 
    transition: height 1s; 
} 

[id^=title]:hover { 
    height: 10em; 
} 

Answer 3

Podejście wykorzystujące height, line-height, font-size , opacity

[id^="title"] p { 
 
    overflow:hidden; 
 
    font-size:0em; 
 
    line-height:0em; 
 
    /* height:0px; */ 
 
    opacity:0; 
 
    -webkit-transition: height 1s; 
 
    transition: /* height 1s,*/ opacity 1s, line-height 0.1s; 
 
} 
 

 
[id^="title"]:hover p { 
 
    /* height:auto; */ 
 
    opacity:1; 
 
    line-height:1em; 
 
    font-size:1em; 
 
    opacity:1; 
 
    text-overflow: ellipsis; 
 
}

<div id="title1">Title 1<p id="details">Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition.</p></div> 
 
<div id="title2">Title 2<p id="details">Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size...</p></div> 
 
<div id="title3">Title 3<p id="details">Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. </p></div> 
 
<div id="title4">Title 4<p id="details">Height and transition working - just one catch - the animation does not pause when a new one starts, creating a kind of animation stack that is annoying... Height and transition working - just one catch - the animation does not pause when a new one starts, creating a kind of animation stack that is annoying... Height and transition working - just one catch - the animation does not pause when a new one starts, creating a kind of animation stack that is annoying... </p></div>

jsfiddle https://jsfiddle.net/ypwu9n0g/17/