在ngx- scroll中，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- scroll.Only中，ngsReveal隐藏了在scroll.Only组件上应该动画的组件，这些组件在网站的视窗内显示和动画。除了应该在滚动上显示的卡是隐藏的。我可以看到卡存在那里，因为我有一个单击事件，它的工作，但组件是隐藏的。我看不到任何控制台错误。

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

它的工作元素，除了在视口中，在后来的经验，通过放置内容在不同的地方。

div被隐藏了，因为它被放在了mat-drawer-content下面。知道为什么它隐藏了第一次加载时不会出现的元素吗？

我可以看到这个显示卡的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元素绑定在一起！PS:我不确定这在你的场景中是否有效。

Answer 2

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

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