README

❗❗❗ 这是 aos@next 的 README ❗❗❗

对于最新的稳定版本（v2），请访问这里

🚀 演示

🌟 Codepen 示例

👉 为了更好地理解它是如何工作的，我鼓励你查看我在 CSS-tricks 的文章。

⚙️ 安装

基本

在 <head> 中添加样式

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

在 </body> 标签之前添加脚本，并初始化 AOS

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

使用包管理器

安装 aos 包

yarn add aos@next
或 npm install --save aos@next

导入脚本、样式并初始化 AOS

import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();

为了使其正常工作，你必须确保你的构建过程已配置样式加载器，并将其正确捆绑。然而，如果你使用 Parcel，它将默认工作。

🤔 如何使用它？

1. 初始化 AOS

AOS.init();

// You can also pass an optional settings object
// below listed default settings
AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

2. 使用 `data-aos` 属性设置动画

  <div data-aos="fade-in"></div>

并通过使用 data-aos-* 属性调整行为

  <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

查看所有动画、缓动和锚点位置的完整列表

锚点

还有一个仅适用于单个元素的设置

data-aos-anchor - 用于触发动画的偏移量元素，而不是实际元素。

示例

<div data-aos="fade-up" data-aos-anchor=".other-element"></div>

这样，你可以在滚动到另一个元素时触发动画 - 在动画固定元素时很有用。

API

AOS 对象作为全局变量公开，目前有三种可用方法

init - 初始化 AOS
refresh - 重新计算所有元素的偏移量和位置（在窗口大小调整时调用）
refreshHard - 重新初始化 AOS 元素数组并触发 refresh（在与 aos 元素相关的 DOM 变化时调用）

执行示例

  AOS.refresh();

默认情况下，AOS 会监视 DOM 变化，如果有任何新元素异步加载或从 DOM 中删除，它会自动调用 refreshHard。在不支持 MutationObserver 的浏览器（如 IE）中，你可能需要自己调用 AOS.refreshHard()。

refresh 方法在窗口大小调整时调用，等等，因为它不需要构建新的 AOS 元素存储，应该尽可能轻量。

JS 事件

AOS 在文档上发出两个事件：aos:in 和 aos:out，每当任何元素进入或退出动画时，这样你就可以在 JS 中执行额外操作

document.addEventListener('aos:in', ({ detail }) => {
  console.log('animated in', detail);
});

document.addEventListener('aos:out', ({ detail }) => {
  console.log('animated out', detail);
});

你还可以通过设置 data-aos-id 属性来告诉 AOS 在特定元素上触发自定义事件

<div data-aos="fade-in" data-aos-id="super-duper"></div>

然后你可以监听两个自定义事件

aos:in:super-duper
aos:out:super-duper

食谱

添加自定义动画

有时内置动画还不够。比如说，你需要一个盒子根据分辨率有不同的动画。下面是你可以这样做的方法：

[data-aos="new-animation"] {
  opacity: 0;
  transition-property: transform, opacity;

  &.aos-animate {
    opacity: 1;
  }

  @media screen and (min-width: 768px) {
    transform: translateX(100px);

    &.aos-animate {
      transform: translateX(0);
    }
  }
}

然后在HTML中使用它

<div data-aos="new-animation"></div>

在移动设备上，该元素只会改变不透明度，但从768像素宽度开始，它还会从右向左滑动。

添加自定义缓动

与动画类似，你也可以添加自定义缓动

[data-aos] {
  body[data-aos-easing="new-easing"] &,
  &[data-aos][data-aos-easing="new-easing"] {
    transition-timing-function: cubic-bezier(.250, .250, .750, .750);
  }
}

自定义默认动画距离

内置动画的默认距离是100px。但是只要你在使用SCSS，就可以覆盖它

$aos-distance: 200px; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss';

然而，你必须配置你的构建过程，以便它可以在之前导入来自node_modules的样式。

集成外部CSS动画库（例如Animate.css）

使用animatedClassName来更改AOS的默认行为，以在滚动时应用data-aos内部放置的类名。

<div data-aos="fadeInUp"></div>

AOS.init({
  useClassNames: true,
  initClassName: false,
  animatedClassName: 'animated',
});

上面的元素将获得两个类：animated和fadeInUp。使用上述三个设置的任意组合，你应该能够集成任何外部CSS动画库。

但是，外部库并不太关心实际动画之前的动画状态。所以，如果你想那些元素在滚动前不可见，你可能需要添加类似的样式

[data-aos] {
  visibility: hidden;
}
[data-aos].animated {
  visibility: visible;
}

注意事项

设置：`duration`，`delay`

持续时间延迟接受50到3000的值，步长为50毫秒，这是因为它们由CSS处理，为了不使CSS比现在更长，我仅实现了子集。我相信这些应该涵盖了大多数情况。

如果不这样，你可以编写简单的CSS，添加另一个持续时间，例如

  body[data-aos-duration='4000'] [data-aos],
  [data-aos][data-aos][data-aos-duration='4000'] {
    transition-duration: 4000ms;
  }

此代码将为AOS元素添加4000毫秒的持续时间，你可以设置它，或者初始化AOS脚本时将其设置为全局持续时间。请注意，双[data-aos][data-aos] - 这不是错误，这是一个技巧，使单个设置比全局设置更重要，而不需要编写难看的"!important"：

示例用法

  <div data-aos="fade-in" data-aos-duration="4000"></div>

预定义选项

动画

淡入动画
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
翻转动画
- flip-up
- flip-down
- flip-left
- flip-right
滑动动画
- slide-up
- slide-down
- slide-left
- slide-right
缩放动画
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right

锚点位置

top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top

缓动函数

linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart

❔问题

如果你发现了一个错误，有疑问或有想法，请查看AOS贡献指南，并且不要犹豫创建新的问题。

webtourismus / aos

维护者

详情

README

❗❗❗ 这是 aos@next 的 README ❗❗❗

🚀 演示

🌟 Codepen 示例

⚙️ 安装

基本

使用包管理器

🤔 如何使用它？

1. 初始化 AOS

2. 使用 `data-aos` 属性设置动画

锚点

API

JS 事件

食谱

添加自定义动画

添加自定义缓动

自定义默认动画距离

集成外部CSS动画库（例如Animate.css）

注意事项

设置：`duration`，`delay`

预定义选项

动画

锚点位置

缓动函数

❔问题

webtourismus / aos

维护者

详情

README

❗❗❗ 这是 aos@next 的 README ❗❗❗

🚀 演示

🌟 Codepen 示例

⚙️ 安装

基本

使用包管理器

🤔 如何使用它？

1. 初始化 AOS

2. 使用 data-aos 属性设置动画

锚点

API

JS 事件

食谱

添加自定义动画

添加自定义缓动

自定义默认动画距离

集成外部CSS动画库（例如Animate.css）

注意事项

设置：duration，delay

预定义选项

动画

锚点位置

缓动函数

❔问题

2. 使用 `data-aos` 属性设置动画

设置：`duration`，`delay`