滚动到 angular2 时动画进入视图

2023-12-25

我找到了一个库,用于在滚动到 (aos https://github.com/michalsnik/aos),但它似乎没有任何 angular2 绑定可供使用。有谁知道如何在 Angular2 中完成类似的事情,或者至少配置 aos 在 Angular2 中工作?

谢谢你的帮助


对于那些从 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();
    }
}
  1. 要开心:
<img data-aos="animation_name" src="..."/>

e.g.:

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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

滚动到 angular2 时动画进入视图 的相关文章