CSS FadeIn effect from display: none to display: block

Question

I have a list of items that on hover show a few options below each item in a div. I would like to show these options only when the user hovers on the list item and when they move away reclaim the space that the div occupies. Hence I've used display: none; on the div and on hover set it to display: block;.

A demo of this is here

This works as intended but the transition is way too fast and gives a sort of jarring effect. Is there a nicer way to fade in and out this div (preferably with CSS only)? Or do I need to resort to using JavaScript for this? (I've developed the app without jQuery so far and would prefer not having to include it only for this).

Also the height of the list items vary so using an opacity transition from 0 to some height is not a viable option.

You can't do CSS transitions on display properties as they are toggles and don't have any "in between" states. See here: http://stackoverflow.com/questions/3331353/transitions-on-the-display-property — Mathias Rechtzigel, Jul 18 '14 at 15:01
I did gather as much, hence the question for alternative options. — source.rar, Jul 18 '14 at 15:04
Do you know the max possible height of your `actions` block? If yes, you can try something like [this](http://jsbin.com/rocapepe/1/edit) — Harry, Jul 18 '14 at 15:18

score 1 · Accepted Answer · answered Jul 18 '14 at 15:16

One can not transition on display property and property with auto value. This can be achieved by using max-height property.

Instead of display: none, use max-height: 0 and instead of display: block, use max-height: <some value which you expect to be maximum>. Please note the caveat, the transition speed depends on the value of the max-height.

For example, if the computed height of container1 is 200px and of container2 is 400px; setting the max-height to 500px from 0 will exhibit different transition speed for both the container for the same timer function.

Thanks this and another article I found (http://css3.bradshawenterprises.com/animating_height/) based on this reply got me in the right direction. — source.rar, Jul 20 '14 at 11:07

score 0 · Answer 2 · answered Jul 18 '14 at 15:39

Hope this helps, Working code here

HTML:

<div class="item">
    <a href="#">Item 1.....more text here</a>
    <div class="actions">
        <a href="#">Opt 1</a> <a href="#">Opt 2</a>
    </div>
</div>
<div class="item">
    <a href="#">Item 2</a>
    <div class="actions">
        <a href="#">Opt 1</a> <a href="#">Opt 2</a>
    </div>
</div>

CSS:

.actions{display:none;}
.item{margin:30px;}

jQuery:

$(document).on({
    mouseenter: function () {
       $(this).children('.actions').stop().fadeIn('fast');
    },

    mouseleave: function () {
        $(this).children('.actions').stop().fadeOut('fast');
    }
}, '.item');

CSS FadeIn effect from display: none to display: block

2 Answers2