AOS:CSS驱动的"滚动"动画库

以下是Netguru前端开发人员MichałSajnóg的客座帖子。Michał创建了一个\"当你滚动到这里，触发这个动画\"库。我喜欢它的一点是，它尽可能多地留给CSS来创建和控制动画本身。更不用说它在许多生产现场都表现出色。我让Micha带你过去看看。你见过那些长网页吗？当你向下滚动时，会有不同的动画应用？我想和你分享一个我写的插件，它可以很容易地处理所有类型的动画，完全由CSS控制，没有痛苦。 p>如果你想直接进入它，代码在GitHub上。其他库的问题在我们以前使用的公司哇哦.js（或其他类似的库）在滚动条上设置元素的动画。对于简单的项目来说，这是非常好的，但是在更大的站点上，我们希望对实际发生的事情有更多的控制。在所有流行的库中，动画都是通过JavaScript插入内联CSS来处理的。啊！内联样式是邪恶的。它们很难控制和超越。不过，在某些情况下，可以使用JavaScript设置它们，把它们放在它们所属的位置，在CSS文件中处理所有与CSS相关的事情，这样做还是比较干净的。我决定创建一个有一个纯粹目标的库——检测元素的位置，然后在它们出现在viewport中时添加适当的类。完全在CSS中控制动画我的新库的职责： - 拥有JavaScript中的所有逻辑，拥有CSS中的所有动画，这允许您轻松添加自己的动画，并根据视口更改它们。AOS的工作原理AOS背后的想法很简单：根据您提供的设置查看所有元素及其位置。然后添加/删除类aos-animate。当然，在实践中，这并不总是那么容易，但是AOS背后的想法就是这么简单。动画的每一个方面都由CSS处理。。这里有一个例子：You don\"t have to worry about duration or delay. In the CSS, you only: add styles for the attribute aos用你的动画名称设置transition-property（默认为all，因此，如果您将转换范围缩小到预期的属性，它的性能和可预测性会更高）在.aos-animate上添加转换后属性，例如持续时间/延迟/放松等设置独立于动画。示例HTMLor with a different transition duration:**Tip:** You can use data-aos而不是aos以使您的HTML生效正确。具有不同动画的现场演示：使用锚定设置：具有锚定放置和不同放松：具有简单自定义动画：附加功能锚定–基于其他元素的位置锚定位置–根据元素在屏幕上的位置设置动画。它不必只在\"视口\"中出现时才设置动画，但例如，当它的底部碰到屏幕中间时，双向动画就会设置动画，默认情况下，元素会在上下滚动时设置动画，但您可以强制它只设置一次动画轻松禁用–使用预定义选项（如mobile、phone、tablet）或自定义条件/函数在移动设备上禁用动画异步感知–重新计算DOM更改中元素的位置，因此在使用Ajax加载某些内容后，您可以不必担心任何事情（除非你支持IE9，因为它需要变异观测者）没有依赖关系——这个库是用纯JS编写的，不依赖任何依赖关系AOS是完全开源的，所以，如果你有一个有趣的想法或者什么东西不起作用，你会期待一个开放的问题，看到你在GitHub！任何贡献都将受到高度赞赏 - add styles for the attribute aos用你的动画名称设置transition-property（默认为all，因此，如果您将转换范围缩小到预期的属性，它的性能和可预测性会更高） - 在.aos-animate - 锚定–基于其他元素的位置 - 锚定位置–根据元素在屏幕上的位置设置动画。它不必只在\"视口\"中出现时才设置动画，但例如，当它的底部碰到屏幕中间时，双向动画就会设置动画，默认情况下，元素会在上下滚动时设置动画，但您可以强制它只设置一次动画 - 轻松禁用–使用预定义选项（如mobile、phone、tablet）或自定义条件/函数在移动设备上禁用动画 - 异步感知–重新计算DOM更改中元素的位置，因此在使用Ajax加载某些内容后，您可以不必担心任何事情（除非你支持IE9，因为它需要变异观测者） - 没有依赖关系——这个库是用纯JS编写的，不依赖任何依赖关系

AOS:CSS驱动的"滚动"动画库

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么