在页面更改时为某些元素设置动画答案

【问题标题】：Animate certain elements out on page change在页面更改时为某些元素设置动画
【发布时间】：2017-06-09 07:01:00
【问题描述】：

所以我一直在阅读页面转换，它们很快就会变得非常复杂。我还是 jQuery 的新手，所以我希望得到一个关于如何在页面转换上执行动画（即在单个元素上）的简化答案。

对于这些问题的基础性，我深表歉意，但我相信你们都知道，一旦掌握了基本原理及其简单化的概念，剩下的事情就会变得容易得多。

所以根据我的阅读，你会使用 jQuery 来检测页面变化，执行动画然后允许页面变化。

然后 jQuery 将在页面加载时执行并为其中的元素设置动画。

问题 1： 所以对于第一部分，我发现我需要使用：

$( window ).unload(function() {
  return "Handler for .unload() called.";
});

我将如何使用它来延迟页面更改足够长的时间以完成我的动画，这是否会考虑使用后退和前进浏览器按钮的页面更改？

问题 2： 如何确保我的元素在新页面加载时从屏幕开始，并且仅在内容加载后才开始动画？

$(document).ready 函数只会在页面准备就绪后执行，因此会在屏幕上显示徽标，然后将其跳出屏幕并重新显示动画。

P.s 我会更新这个帖子，详细说明一旦我弄清楚了如何达到我想要的结果。非常感谢。

【问题讨论】：

对于问题 2，我可以为您提供的最简单的解决方案是使用 JS 脚本。 WOW.js 应该为您解决问题。
谢谢，但我试图弄清楚如何在不使用预构建脚本的情况下执行此操作的基本理解。基本上，我想弄清楚如何延迟页面更改，以便我可以动画元素，然后延迟新页面加载，以便我可以动画元素（一旦页面内容完全加载）

【解决方案1】：

第一个问题，你可以试试下面的jquery代码。

$(window).load(function() {
    $(".animation").fadeOut("slow").delay(1000);
});

页面一加载，上面的动画就会加载。如果您想添加额外的延迟，也可以添加.delay() :)

【讨论】：

【解决方案2】：

如果您需要为一个站点内的页面更改提供动画 - 您可能计划制作所谓的“单页应用程序”。

那么对您的问题 1 的回答将是： - 改用 ajax 和 History API

问题2的答案： - 你实际上永远不会离开页面。使用 ajaxy 加载器更改内容（当您隐藏前一页内容和显示新页面内容时使用动画），然后您推送一个新的历史状态以使用户可以使用浏览器按钮进行导航。 PS。您可以实现一些漂亮的效果，保留内容的重复部分（例如徽标图像）并仅对内容的其余部分进行动画处理。

或者 - 看看here 对于其他一些解决方案（可能更容易开始）： https://github.com/miguel-perez/smoothState.js?files=1 实现this 或this 之类的目标

【讨论】：

这将是多个页面之间的转换，单页应用程序很好，我在默认页面转换方面更加挣扎。因此，如果我单击导航链接，浏览器会立即加载下一页...想弄清楚如何延迟页面更改以便我可以为元素设置动画，然后延迟新页面加载以便我可以在中为元素设置动画
@SonyThePony - 好吧，如果你匹配另一个答案是正确的，我认为我们没有什么可谈的。 ..
@SonyThePony - 您不能延迟页面更改，（显示警报或确认对话框的 1 个例外），您可以做的是接管导航点击处理程序并在您之前添加您想要的行为导航 - 但除非您制作 ONE PAGE APP，否则您永远不会处理后退/前进按钮。 ...好吧...我已经觉得自己像个傻瓜，我花了这么多时间在这上面——白费。欢呼，祝你好运。