Javascript 从显示：无到显示：块的CSS FadeIn效果

我有一个悬停的项目列表，在div中的每个项目下面显示一些选项。我只想在用户悬停在列表项目上并且当他们离开时显示这些选项，以回收div占用的空间。因此我使用了

display:none和悬停将其设置为
显示：块

这是一个演示

这是按计划进行的，但是转换太快了，会产生一种不和谐的效果。有没有更好的方法淡入淡出这个div（最好只使用CSS）？或者我需要为此使用JavaScript吗？（到目前为止，我开发的应用程序没有jQuery，因此我不希望只为此而包含它）

此外，列表项的高度也会有所不同，因此使用从0到某个高度的不透明度转换是不可行的选择。
不能在显示属性和具有自动值的属性上进行转换。
这可以通过使用“最大高度”属性来实现

不要使用
显示：无
，
使用最大高度：0
，而不要使用
显示：块
，使用
最大高度：
。
请注意，过渡速度取决于最大高度的值

例如，如果
容器1
的计算高度
为
200px
，
容器2
的计算高度
400px
；从
0
将最大高度设置为
500px
将显示两个容器在相同计时器功能下的不同转换速度。
希望这对工作有所帮助

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>

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

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

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

jQuery:

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

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

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

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

您不能对显示属性进行CSS转换，因为它们是切换的，并且没有任何“中间”状态。请看此处：我收集了同样多的信息，因此提出了备选方案问题。请看我链接的问题的顶部答案。在问题中发布您的代码。您知道
操作的最大可能高度吗？如果是的话，你可以试试类似于“谢谢”这样的东西。我发现的另一篇文章（）基于这个回复，让我找到了正确的方向。