В ngx-scrollreveal 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-scrollreveal ngsReveal - это скрытие компонентов, которые должны анимироваться при прокрутке. Отображаются и анимируются только компоненты, находящиеся в области просмотра веб-сайта. кроме карт, которые должны отображаться на свитке, они скрыты. Я мог видеть, что карты присутствуют там, так как у меня есть событие щелчка, оно работает, но компоненты скрыты. И я не вижу никаких ошибок консоли.

"./ node_modules / scrollreveal / dist / scrollreveal.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! PS: я не уверен, что это будет работать в вашем сценарии или нет.