页面加载和页面卸载/退出页面上的非 jquery css 动画答案

【问题标题】：non-jquery css animation on page-load and page-unload/exit-page页面加载和页面卸载/退出页面上的非 jquery css 动画
【发布时间】：2013-05-05 07:35:28
【问题描述】：

是否有非 jquery 方式在页面加载时运行纯 css 动画并在页面卸载/退出页面上运行另一个动画？

【问题讨论】：

页面卸载/退出页面是什么意思？
类似于以下 IE 元标记，但使用 CSS：
查看您正在使用的代码或您尝试在问题中使用的代码会很有帮助。我知道您可以在页面加载时运行 css 动画，但我怀疑您是否能够在没有脚本的情况下在页面退出时运行它们。此外，用户可能会因为在尝试离开页面时必须等待动画运行而感到恼火。
感谢您的评论。我没有考虑任何特定的动画，但在以下 URL 中有一些示例：daneden.me/animate 我认为，例如，当 html 页面加载以及单击或点击引用，div 消失了。淡入是下一个引语，依此类推……我不认为这很烦人，如果一个迅速淡出而另一个迅速淡入。
哦，对不起，我误解了你的目标。我以为您在浏览网站时试图让整个页面动画进出。我正在想象有人点击一个链接，并且在他们转到下一页之前必须等待动画。

标签： css animation

【解决方案1】：

加载动画可以单独使用 css 完成，但对于单击动画，我认为您需要一点 jQuery。

您正在寻找这样的东西吗？ -jsFiddle

$('#container').click(function () {
    $('#container').fadeOut();
    $('#quote1').fadeIn().addClass('bounceInLeft');
});

$('#quote1').click(function () {
    $('#quote1').fadeOut();
    $('#quote2').fadeIn().addClass('bounceInRight');
});

您也可以单独在 CSS 中制作悬停触发动画。要连接两个或多个元素，我认为它们必须嵌套。就像将鼠标悬停在父对象上一样，为子对象设置动画。

【讨论】：

如果在页面加载时淡入的内容是指向文档内某个位置的链接，则可以实现“点击时淡出”。 body 元素的 id 值 <a id="foo" href="#body">…</a> - 然后选择器 #body:target #foo 将用于触发后代 a 元素的淡出...
@CBroe 我没有想到，我认为这可能正是 OP 正在寻找的，将其作为答案发布。
@CBroe：很好的解决方案，除了 jQuery 部分。谢谢。
感谢所有建议！那我还是坚持jQuery吧！

【解决方案2】：

如果在页面加载时淡入的内容是指向文档内某个位置的链接，则可以实现“点击时淡出”，例如 f.e. body 元素的 id 值 <a id="foo" href="#body">…</a> - 然后选择器 #body:target #foo 将用于触发后代 a 元素的淡出……

【讨论】：