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

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

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