Question

是否有非jquery方式在页面加载时运行纯粹的基于CSS的动画，在页面卸载/退出页面上运行另一个动画？

Answer 1

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

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

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

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

你也可以单独在css中悬停触发的动画。要连接两个或多个元素，我认为它们必须嵌套。如悬停在父母身上，动画儿童。

Answer 2

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

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

2 个答案: