在显示页面更改动画时更改URL

Question

想知道如何在我建立的网站上实现以下效果：

1. 宽度为100vw，高度为100vh的Div（我们称之为＃container2）隐藏在主页右侧（我们将调用主页#container1）。
2. 将鼠标移向页面的右边缘会导致＃container2查看。
3. 如果用户点击＃container2的可见部分，它会一直向左滑动，完全遮挡＃container1。
4. 用户现在位于带有相应网址的新网页上，可以向下滚动并查看更多内容。

我或多或少地想到了前3个步骤。我需要帮助的是找出最好的方法：

• 在滑动动画期间处理从 site.com 到 site.com/newpage 的网址转换
• 如果页面转换发生后如何将新页面内容动态加载到＃container2，那么用户可以向下滚动并查看新页面内容，如果他们点击它，但没有如果内容选择留在主页上，则加载内容。
• 如果有人打字或直接链接到 site.com/newpage ，他们会看到与在主页上启动的用户相同的东西，点击＃container2，并观看过渡动画看到（但没有显示页面转换）。

我没有任何代码段显示，因为我不确定从哪里开始。任何帮助或方向将不胜感激。如果可能的话，我想使用一个vanilla javascript解决方案，因为我设法让网站上的所有其他功能在没有JQuery的情况下运行。如果JQuery是唯一的方法，我仍然喜欢听到解决方案。

Answer 1

有很多方法可以做到这一点。我的直觉是只有一个页面有不同的url片段。你的问题相当广泛，所以我的回答也很广泛。

一种方法是在css中使用目标伪类。您需要做的就是使container2成为一个链接，它将片段添加到与所述容器的类名匹配的url的末尾。你可以有一些样式：悬停使容器滑出，并设置一些设置：target将容器带到页面的中心。 Container2可能在折叠下方有第二部分，其中包含页面的其余内容。

您可以通过添加和删除各种元素中的类来执行与javascript非常相似的操作，但使用目标伪类将有助于您的上一个项目符号点。如果用户直接转到带有片段的链接，他们将看到显示该容器的页面。

我希望这能给你一个开始的地方。这是关于目标伪类的some info。