相关疑难解决方法(0)

Angular 4 - 当div进入视口时如何触发动画?

我一直在使用Angular 4构建一个新站点,我正在尝试重新创建一个效果,当div变为可见时(向下滚动屏幕)然后可以触发角度动画以滑动div形式双方.

我以前在Angular 4之外使用jQuery已经能够做到这一点,但我想尝试使用原生的Angular 4动画创建相同的效果.

任何人都可以向我提供有关如何在div进入视图时触发动画的建议(即当它进入视口时向下滚动到页面的下半部分?).我已经编写了幻灯片动画但我不知道如何在以后将div显示到视口时使用滚动触发它.

感谢大家!

animation scroll visible angular

7
推荐指数
2
解决办法
1万
查看次数

将AOS库与Angular4应用程序集成

我正在开发Angular 4.4.6应用程序,我想使用强大的插件AOS在滚动上实现一些动画

我的代码:

app.component.ts

import * as AOS from 'aos';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss'],
 encapsulation:ViewEncapsulation.None
})
export class AppComponent implements OnInit {
 ngOnInit(){
  AOS.init();
 }
}
Run Code Online (Sandbox Code Playgroud)

app.component.html

<div class="box" data-aos="slide-left">
      <img src="assets/imgs/seo.png" alt="">
</div>
Run Code Online (Sandbox Code Playgroud)

angulr.cli.json

"styles": [
    "../node_modules/aos/dist/aos.css",
    "../node_modules/animate.css/animate.min.css",
    "styles.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/aos/dist/aos.js"
  ],
Run Code Online (Sandbox Code Playgroud)

我在这里尝试了答案,没有希望 /sf/answers/3136594751/

注意:我的控制台中没有错误.

jquery jquery-plugins angular angular-animations

6
推荐指数
3
解决办法
4774
查看次数