css - 如何从某个网页播放CSS动画

Question

Web 开发相当新，所以请多多包涵。我目前有 3 个网页:Home、Portfolio 和 Contact。 Home 页面的背景覆盖了一半的页面； Portfolio 和 Contact 具有相同的背景，但仅占页面的四分之一。

当从 Home 移动到 Portfolio 或 Contact 时，我希望背景动画“向上”；以及从 Portfolio 或 Contact 移动到 Home 时动画“向下”的背景。 Portfolio 和 Contact 之间不应出现动画。

当 Portfolio 或 Contact 页面加载时，我已经成功地让背景动画“向上”，而当 Home 使用以下 CSS 加载页面:

//Home Page
body { background: #fbfbfb url("../gallery_gen/33123835311a4a19ce0578c280449a50.png") no-repeat scroll center top; 
    animation: bgSlideOut 1s ease-out;
    animation-fill-mode: forwards;
}

@keyframes bgSlideOut {
    from { background-position: 0 -370px; }
    to { background-position: 0 0; }
}



//Portfolio and Contact Pages
body { background: #fbfbfb url("../gallery_gen/33123835311a4a19ce0578c280449a50.png") no-repeat scroll center top;
    animation: bgSlideOut 1s ease-out;
    animation-fill-mode: forwards;
}

@keyframes bgSlideOut {
    from { background-position: 0 0; }
    to { background-position: 0 -370px; }
}

但是，当从 Contact 移动到 Portfolio 时，将播放 Portfolio 动画，反之亦然。有什么方法可以让动画仅在从 Home 移动到 Portfolio/Contact 时播放，反之亦然？

Answer 1

过渡 CSS 很好，但没有回答核心问题 - 这些页面如何知道是否运行过渡？他们需要知道用户“来自”哪个页面。该信息必须传递给页面。 CSS 本身并不知道浏览器历史记录。

不知道您的设置(3 个静态 HTML 页面？单页应用程序、JSP/PHP)，您需要确定“主页”页面如何与这些页面进行通信 - 通过它的链接(查询字符串)、UI 逻辑跟踪同一 DOM 中的“历史”，或通过服务器上传递数据的 session 处理。

因此，无论是在页面初始化 JS 还是 JSP/PHP 层，您都可以有条件地在 body 标签上添加一个 CSS“钩子(Hook)”，例如在来自主页时应用过渡 CSS 的类，并在出现时省略该类来自其他内容页面。