滚动到 angular2 时动画进入视图

Question

我找到了一个库，用于在滚动到 ( aos )时将元素动画化到视图中，但它似乎没有任何 angular2 绑定可供使用。有谁知道如何在 angular2 中完成这样的事情，或者至少将 aos 配置为在 angular2 中工作？

谢谢你的帮助

Answer 1

对于从 2020 年开始遇到这个问题的人，在最新版本的 Angular 中有更简单的方法可以解决这个问题：

1. 导入 AOS 库： npm i -s aos
2. 将输入导入 TypeScript： npm i -D @types/aos
3. 在全局样式中导入 CSS（可能是 src/styles.scss）： @import "~aos/dist/aos.css";
4. 在项目的根组件上启动 AOS（可能是 app-component.ts）

import * as AOS from 'aos';
...
export class AppComponent implements OnInit {
    ngOnInit(): void {
        AOS.init();
    }
}

5. 要开心：

<img data-aos="animation_name" src="..."/>

例如：

<img data-aos="fade" src="..."/>

动画名称列表：https : //github.com/michalsnik/aos/tree/v2#-animations

高级设置：https : //github.com/michalsnik/aos/tree/v2#-advanced-settings