我一直在使用Angular 4构建一个新站点,我正在尝试重新创建一个效果,当div变为可见时(向下滚动屏幕)然后可以触发角度动画以滑动div形式双方.
我以前在Angular 4之外使用jQuery已经能够做到这一点,但我想尝试使用原生的Angular 4动画创建相同的效果.
任何人都可以向我提供有关如何在div进入视图时触发动画的建议(即当它进入视口时向下滚动到页面的下半部分?).我已经编写了幻灯片动画但我不知道如何在以后将div显示到视口时使用滚动触发它.
感谢大家!
我正在开发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/
注意:我的控制台中没有错误.