Question

我正在构建一个带有角度的登陆页面，在我的第三个div中，我有一些动画。第一个div占用100vh视图空间，另一个占用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在视口中或屏幕顶部时，如何确保播放这些动画（我不确定什么是最佳选项，因为上面的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。用法示例

在你的模块中：

import { InViewportModule } from 'ng-in-viewport';

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");
    }
}

当div / component在视口中时，angular 2播放css动画

1 个答案: