在ngx滚动显示中，ngsReveal是隐藏应该在滚动时设置动画的组件

Question

<mat-drawer-container style="text-align: center;" class="example-container">
<mat-drawer mode="side" #drawer opened>
<div fxFill class="side-card">
<mat-card-title ngsReveal>
<mat-icon>landscape</mat-icon> Property Cloud
<mat-icon>landscape</mat-icon>
</mat-card-title>
<mat-card class="side-menu">
<mat-card-header>
<div class="example-header-image"></div>
<mat-card-subtitle></mat-card-subtitle>
</mat-card-header>
<hr>
<mat-card-content>
</mat-card-content>
<div style="text-align: center;" class="mt-5">
<div class="t-5">
<button ngsReveal mat-raised-button><a routerLinkActive="active" routerLink="property_feed"> </a>Property feed</button>
</div>
<div ngsReveal class="t-5">
<button mat-raised-button>My Account</button>
</div>
<div class="t-5">
<button ngsReveal mat-raised-button>My Properties</button>
</div>
<div class="t-5">
<button ngsReveal mat-raised-button> My Wishlist</button>
</div>
<div class="t-5">
<button ngsReveal mat-raised-button> Settings and privacy</button>
</div>
</div>
</mat-card>

</div>
</mat-drawer>

<mat-drawer-content>

<div fxFill class="main-card">
<app-header (toggleEmitter)="drawer.toggle()"></app-header>
<div  fxLayout="row wrap" >
<div  *ngFor="let ppty of property">
<div  ngsReveal fxFlex>
<mat-card   class="property-feed">
<mat-card-header>
<div mat-card-avatar class="avatarImage"></div>
<mat-card-title >Card Title</mat-card-title>
<mat-card-subtitle >Card Subtitle</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<app-gallery ></app-gallery>
<h3>some informaion to the end user</h3>
</mat-card-content>
<mat-card-footer>
</mat-card-footer>
<mat-card-actions>
<button matTooltip="If intrested contact seller" mat-fab large color="primary">
<mat-icon>thumb_up_alt</mat-icon>
</button>
<button matTooltip="If intrested add to wishlist" mat-fab large color="warn">
<mat-icon>add_shopping_cart</mat-icon>
</button>
<button matTooltip="View details" mat-fab large color="warn">
<mat-icon>unfold_more</mat-icon>
</button>
</mat-card-actions>
</mat-card>
</div>

</div>
</div>

</div>


</mat-drawer-content>

</mat-drawer-container>

在ngx滚动显示中，ngsReveal是隐藏应该在滚动时设置动画的组件。只有在网站视口中的组件才显示和设置动画。除了应该在卷轴上显示的卡片之外，其他卡片都被隐藏了。我可以看到卡片在那里，因为我有一个点击事件，它可以工作，但组件是隐藏的。我看不到任何控制台错误。

"./node_modules/sollshow/dist/sollshow.min.js"，在angular.json 中导入

它适用于除视口中的元素外的其他元素，稍后通过将内容放置在不同位置进行体验。

div被隐藏了，因为它被放在垫子抽屉的内容下面。任何想法为什么它隐藏的元素不是第一次加载。

我可以看到这个显示卡的html和隐藏卡的html在不透明的情况下是不同的，但不知道是什么原因造成的。除了在垫子抽屉容器内，它工作正常。

import { Component, OnInit } from '@angular/core';
import { NgsRevealConfig } from 'ngx-scrollreveal';
@Component({
selector: 'app-property-feed',
templateUrl: './property-feed.component.html',
styleUrls: ['./property-feed.component.scss'],
providers: [NgsRevealConfig] 
})
export class PropertyFeedComponent {
property =[1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10];

}

button {
margin: 5px 5px 5px 5px;
}
.feed-title {
font-size: 30px;
font-family: "Girassol", cursive;
}
.property-feed {
width: 300px;
height: 410px;
margin-top: 15px;
margin-right: 10px;
}
@media only screen and (max-width: 600px) {
.property-feed {
width: 300px;
height: 410px;
margin-top: 10px;
margin-right: 5px;
}
}

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

[ngsReveal]="{delay: some_delay, reset: false}"

尝试使用html元素绑定它的属性！附言：我不确定这是否适用于你的情况。

Answer 2

尝试添加className(按钮(并将您的类名添加到容器

<button class="button" [ngsReveal]="{reset: true, container: '.button'}" mat-raised-button> My Wishlist</button>