html - 当 div/component 在视口(viewport)中时，angular 2 播放 css 动画

Question

我正在构建一个带 Angular 着陆页，在我从顶部开始的第三个 div 中，我有一些动画。第一个 div 占据 100vh View 空间，另一个说 50，然后我有以下 div(所有这些 div 代表单独的组件):

<div id="about" class="app-about-us-div-container">

    <div class="onboarding-flow mdl-grid">
        <div class="mdl-cell mdl-cell--4-col">
            <div class="circle circle-1">
            <i class="onboarding-icon material-icons">local_phone</i>
            </div>
            <div class="onboarding-text">
                <p>Tell us your problem domain and we will customize our solution to meet your specific needs</p>
            </div>
        </div>
        <div class="mdl-cell mdl-cell--4-col">
            <div class="circle circle-2">
                <i class="onboarding-icon material-icons">group</i>
            </div>
            <div class="onboarding-text">
                <p>Engage your project stakeholders, end users without any time hassle to build together a clear product vision</p>
            </div>
        </div>
        <div class="mdl-cell mdl-cell--4-col">
            <div class="circle circle-3">
                <i class="onboarding-icon material-icons">trending_up</i>
            </div>
            <div class="onboarding-text">
                <p>Benefit from our analytics to understand your users and their vision for the product. Build Personas to take best design decisions and streamline important product features </p>
            </div>
        </div>
    </div>

</div>

这是CSS:

.app-about-us-div-container{
    position: relative;
    height: 70vh;
    text-align: center;
    background-color: #ECEFF1;
}

.app-about-us-div-container h4{
    margin-top: 0%;
    padding-top: 20px;
}

.onboarding-flow {
    align-content: center;
    padding-top: 2%;
}

.circle {
    display: inline-block;
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    border-radius: 75px;
    background: transparent;
    text-align: center;
    border: 3px solid #cccccc;
    animation-name: pop;
    animation-iteration-count: 1;
    animation-duration: 0.3s;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    color: #cccccc;
}
.circle-1 {
    animation-delay: 1s;
}
.circle-2 {
    animation-delay: 2s;
}
.circle-3 {
    animation-delay: 3s;
}

.onboarding-icon {
    align-self: center;
    font-size: 65px;
    position: relative;
    top: calc(50% - 35px);
}

.onboarding-text {
    position: relative;
    padding-top: 2%;
    width: 60%;
    left: 20%;
}
.onboarding-text p {
    font-size: 17px;
}

@keyframes pop {
    0% {
        color: #F44336;
        transform: scale(1);
    }

    50% {
        color: #ffffff;
        border-color: #F44336;
        background-color: #F44336;
        transform: scale(1.2);
    }

    100% {
        color: #ffffff;
        border-color: #EF5350;
        background-color: #EF5350;
        transform: scale(1);
    }
}

现在的问题是动画是在页面加载时播放的，直到用户到达这个 div 为止，它就结束了。当这个 div 在视口(viewport)中或屏幕顶部时，我如何确保播放这些动画(我不确定什么是最好的选择，因为上面的 div 占用 50vh，所以在某一时刻它们都可见 50 50)?在这种情况下，环形动画有什么帮助吗？

它的组成部分:

@Component({
  selector: 'app-about-us',
  templateUrl: './about-us.component.html',
  styleUrls: ['./about-us.component.css']
})
export class AboutUsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

我用了ng-in-viewport实现类似的东西。按照插件的 GitHub 页面上的说明进行操作:

<强>1。安装插件

    npm install --save ng-in-viewport intersection-observer

注意:intersection-observer 是一个用于支持所有主流浏览器的 polyfill

<强>2。使用示例

在你的模块中:

从“ng-in-viewport”导入 { InViewportModule }；

import 'intersection-observer';

在你的模板中:

<div in-viewport (inViewportAction)="action($event)" class="circle circle-1">
      <i class="onboarding-icon material-icons">local_phone</i>
</div>

在你的组件中:

action(event : any) {
        //do something with the element
}

例如，您可以使用 Angular's Renderer向元素添加 css 类:

import {Renderer2 } from '@angular/core';

...

constructor(private renderer: Renderer2) {}
action(event : any) {
    if(event.value){ //if element is in viewport
      this.renderer.addClass(event.target, "circle-1");
    }
}