如何将CSS Transition应用于我的响应式菜单？

Question

我创建了一个小型的响应式菜单

http://jsfiddle.net/8gApb/1/

它的工作方式与我想要的完全一样。

但是，我希望菜单实际上过渡而不是立即发生。

我试过添加

    #nav:target > ul
    {
        display: block;
        transition: display 2s linear;

    }

那并没有用。我也试过

    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type
    {
        display: inline-block;
        transition: display 2s linear;
    }

再一次，我没有成功。

我将如何实现这一目标？

Answer 1

你走了：

http://jsfiddle.net/ahallicks/8gApb/2/

将display属性更改为opacity并将其设置为0

#nav > ul {
    opacity: 0;
}

然后又加入过渡：

transition: opacity 1s linear;

目标：

#nav:target > ul {
    opacity: 1;
}