如何在不修改显示的 url 和触发 css 动画的情况下跟随 link？

Question

我有一个分为 2 层的侧边菜单，例如

link1
     link1.1
     link1.2
     link1.3

links 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 url（因为 link 是使用 Javascript 触发的）

但是我的代码并没有实现这两个目标。

我尝试使用 jQuery 的 show() onclick 来显示包含 links 的容器并且它有效（虽然没有动画发生）。

提前致谢

Answer 1

您遇到的问题是转换没有按照您的想法进行。

#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%;
}

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

上面的代码片段显示了执行此操作的正确方法。

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

在代码片段中，您可以看到实际发生变化的是高度和宽度，并且过渡可以应用于该更改。

您还需要为宽度设置动画，否则它会立即变得不隐藏。

如何在不修改显示的 url 和触发 css 动画的情况下跟随 link？

How to following a link without modifying the displayed url and triggering css animation?

css-animations