angular 2在div / component在视口中时播放css动画 [英] angular 2 play css animation when div/component is in viewport

问题描述

我正在用角度创建着陆页，并在顶部的第三个div中创建了一些动画。第一个div占据100vh的视图空间，另一个说50，然后我有下面的div（所有这些div代表单个组件）：

 < div id =aboutclass =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>告诉我们您的问题域名，我们将定制我们的解决方案以满足您的特定需求< / p> 
< / div> 
< / div> 
< div class =mdl-cell mdl-cell  -  4-col> 
< div class =circle circle-2> 
< i class =onboarding-icon素材 - 图标>群组< / i> 
< / div> 
< div class =onboarding-text> 
< p>让您的项目干系人，最终用户毫不费力地共同构建清晰的产品愿景< / 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>从我们的分析中获益，了解您的用户及其产品的愿景。构建角色以采取最佳设计决策并简化重要的产品功能< / p> 
< / div> 
< / div> 
< / div> 
 
< / div> 
  

这是css：

  .app-about-us-div-container {
 position：relative; 
身高：70vh; 
 text-align：center; 
背景颜色：＃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; 
背景：透明; 
 text-align：center; 
 border：3px solid #cccccc; 
 animation-name：pop; 
 animation-iteration-count：1; 
动画持续时间：0.3s; 
 animation-direction：normal; 
 animation-fill-mode：forwards; 
动画计时功能：缓和进出; 
 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; 
职位：亲属; 
 top：calc（50％ -  35px）; 
} 
 
 .onboarding-text {
 position：relative; 
 padding-top：2％; 
宽度：60％;剩余
：20％; 
} 
 .onboarding-text p {
 font-size：17px; 
} 
 
 @keyframes pop {
 0％{
 color：＃F44336; 
 transform：scale（1）; 
} 
 
 50％{
颜色：#ffffff; 
 border-color：＃F44336; 
背景颜色：＃F44336; 
 transform：scale（1.2）; 
} 
 
 100％{
颜色：#ffffff; 
 border-color：＃EF5350; 
背景颜色：＃EF5350; 
 transform：scale（1）; 
 
 
 
 
 
 
 $ b现在问题是动画播放在pageload上，用户到达这个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（）{
 
 
 $ b  
 
 
解决方案
我使用了 ng-in-viewport 来实现类似于此的功能。按照插件GitHub页面上的说明操作：
 
 
 
  1。安装插件 
 
 
  npm install --save ng-in-viewport intersection-observer 
 
 code> 
注意： intersection-observer 是一个polyfill，用于支持所有主流浏览器 
 
 
  2。用法示例 
 
 
 
在您的模块中：
 $ b 
  import {InViewportModule} from'ng-in-viewport';  
 
 
 
  import'intersection-observer';  
 
 
 
在您的模板中： 
 
 
 < 
< i class =onboarding-icon material-icons> local_phone< / i> 
< / div> 
  
在您的组件中： 
 
 
  action（event：any）{
 //对元素
做些什么} 
  
例如，您可以使用 Angular的Renderer 添加一个css class元素： 
 
 
 从'@ angular / core'导入{Renderer2}; 
 
 
 
构造函数（private renderer：Renderer2）{} 
 action（event：any）{
 if（event.value）{ //如果元素在视口中
 this.renderer.addClass（event.target，circle-1）; 
} 
} 
  
 
I am building a landing page with angular and in my third div from top I have some animations. First div occupies 100vh viewspace, another say 50 and then I have following div (all these divs represent individual components):
<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>
It's 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);
    }
}
Now the problem is animations are played on pageload and till the user reaches to this div it's over. How can I make sure that these animations are played when this div is in viewport or at the top of the screen (I am not sure what could be the best option as the div above occupies 50vh so at one point both of them are visible 50 50)? Is anular animation of any help in this case?


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

  constructor() { }

  ngOnInit() {
  }

}

解决方案
I used ng-in-viewport to achieve something similar to this. Follow the instructions available on the plugin's GitHub page:

1. Install the plugin
    npm install --save ng-in-viewport intersection-observer
Note:  intersection-observer is a polyfill used to support all major browsers

2. Usage Example

In your module:

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

import 'intersection-observer';

In your template:
<div in-viewport (inViewportAction)="action($event)" class="circle circle-1">
      <i class="onboarding-icon material-icons">local_phone</i>
</div>
In your component:
action(event : any) {
        //do something with the element
}
You could for example use Angular's Renderer to add a css class to the element: 
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");
    }
}


                        
这篇关于angular 2在div / component在视口中时播放css动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！