angular - 以角度 2 初始化 WOW 动画

Question

如何WOW在一个 Angular 2 应用程序中实现该库，该应用程序一个接一个地显示许多组件，以便在滚动时为这些组件设置动画？我应该在哪里WOW()准确初始化实例？

Answer 1

在您的索引文件中只包含这两个链接和一个脚本。

<link rel="stylesheet" href=" https://cdn.jsdelivr.net/animatecss/3.5.1/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

在 body 标记内的索引文件中初始化 wow() 并添加此脚本

<script>
      new WOW().init();
</script>

现在将其用作：

<div class="wow bounceInUp">
   Content to Reveal Here
 </div>

您可以参考此链接了解更多信息： https ://github.com/matthieua/WOW/issues/46

Answer 2

import {WOW} from '../../assets/js/wow.min';
...
ngAfterViewInit() {
        console.timeEnd("ngOnViewInit");
        if(this.isBrowser) {
            new WOW().init();
        }
    }