Extensible Div with CSS Transition

Question

I have a div at the top of my page containing some heading text, which with a mouseenter must expand (in height) to display some smaller text. Then, after mouseleave , it should back off. It's harder than it sounds ...

The solution should:

• Move from a height so that it matches only the heading, to a height that matches all texts.
• Transition from one to another.
• Try using pure CSS.
• An elongated animation pause if the mouse leaves, and vice versa (by default in CSS, but not in jQuery).

I tried:

• Using :hover in my stylesheet to change the value of a given pixel to auto , as shown in on this question (but I have this purely CSS). This did not happen.
• Using dial height for an extension that does not work in different viewport sizes.
• Using max-height and expanding it to something more than the actual extended div would work, as shown in this question . This meant that the transitions did not work properly and looked different on different devices.
• Using jQuery .animate() , using the auto pixel value to then create a transition, as shown in this question , but the animation should finish before the next one begins, which means that the series of animations can continue for a long time after the user's mouse, if it is far from div

See all four examples here .

As said, pure CSS would be ideal, but if that was not possible, I would be fine with JavaScript (and I prefer jQuery).

Thanks!:)

Answer 1

I don't know a single pure CSS solution for this - moving values ​​to auto is something that the specification did not include; I think it was even an explicit solution, based on the fact that there may be problems with the implementation.

But for a “simple” solution, jQuery Id just completes the paragraph content in an extra range, sets the paragraph's initial height to 0 and overflows: hides, leaves the transition for the height in place - and then allows jQuery to do only one thing, read the height of the span element, set the height for the paragraph, and then set it again to 0 to erase the text again.

 .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); }) 

In this way, CSS still performs a “heavy lift” of height change processing using transition (which can be optimized in browsers), and jQuery / JavaScript is used only to create it a little "push", he should know what to do. (It's pretty accurate that jQuery does the same thing internally, and nowadays with animate() , if the browser supports it - the added benefit would be that jQuery will take care of the fallback implementation if the really old browser doesn't support transition ; my solution , the height will simply change instantly, without any transition.)

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

Please note that in this example the method is the same for all four elements, and I did not change the text content; -)

Answer 2

Try using 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

A css using 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/