html - 在 ngx-scrollreveal 中，ngsReveal 是隐藏组件，应该在滚动时进行动画处理

问题描述

<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 正在隐藏，因为它位于 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 -->

标签： htmlcssangularscrollangular-material

html - 在 ngx-scrollreveal 中，ngsReveal 是隐藏组件，应该在滚动时进行动画处理

问题描述

解决方案

推荐阅读