Question

我有一个侧面菜单，分为两个级别，如

link1
     link1.1
     link1.2
     link1.3

链接1.x 隐藏（显示：无，应用于容器div）并包含在div中（id = resume-2nd-level ）

现在，我创建了一个css类：

#resume-2nd-level:target {
    display:show
    -webkit-transition: height 3s linear 1s;
    transition: height 3s linear 1s;
}

link1的href属性指向：＃resume-2nd-level

我的目标是：

当我点击link1时显示link1.x（最终切换它们：show-hide-show- ..）
link1.x不会立即显示，但带有以下规格的css动画：高度扩展，1秒后开始，持续3秒后才完全展开
隐藏浏览器网址中的＃resume-2nd-level （因为链接是使用Javascript触发的）

然而，我的代码并不是两个目标中的任何一个。

我尝试使用 jQuery的show（） onclick显示包含链接的容器，它可以正常工作（虽然没有动画）。

提前致谢

Answer 1

您遇到的问题是过渡不会像您想象的那样发挥作用。

＆＃13;

#innerMenu {
    height:0%;
    width:0%;
    position:relative;
    overflow:hidden;
    -webkit-transition: height 1s linear 3s;
    transition: height 3s linear 1s;
    -webkit-transition: width 3s linear 1s;
    transition: width 3s linear 1s;
}

#innerMenu:target{
    height:100%;
    width:100%;
}

＆＃13;

<ul>
    <li>
        <a href="#innerMenu">Menu1</a>
        <div id='innerMenu'>
            <ul>
                <li>Menu2</li>
                <li>Menu3</li>
            </ul>
        </div>
    </li>
</ul>

＆＃13;

上面的snippit显示了正确的方法。

过渡属性needs to see a change以便它可以触发。你现在所拥有的并没有改变任何事情。通过尝试显示元素，您实际上并没有改变它的大小。

在snippit中你可以看到实际变化的是高度和宽度，过渡可以应用于那个变化。

此外，您需要为宽度设置动画，否则它将立即被取消隐藏。

如何在不修改显示的网址和触发css动画的情况下关注链接？

1 个答案: