当元素以角度 11 进入可视区域时执行动画

Question

我想在window滚动，元素进入可见区域时触发动画，而不是使用点击事件或按钮触发

当前页面加载时触发动画，如何让卡片滚动到可见区域时触发动画

Answer 1

    @HostListener('window:scroll', ['$event']) 
    doSomething(event:any) {
            if (window.innerWidth > 700) {
                    if (window.pageYOffset >= 357) {
                            this.activeTopClass = true;
                            this.topSection = "slide-left";
                    }
             }
     }
    
     // HTML Code

     <div *ngIf="activeTopClass" [attr.class]="topSection"></div>
     
     // The other option could be to perform something like this
                @Component({
            selector: 'app-open-close',
            animations: [
                trigger('openClose', [
                    // ...
                    state('open', style({
                        height: '200px',
                        opacity: 1,
                        backgroundColor: 'yellow'
                    })),
                    state('closed', style({
                        height: '100px',
                        opacity: 0.8,
                        backgroundColor: '#c6ecff'
                    })),
                    transition('open => closed', [
                        animate('1s')
                    ]),
                    transition('closed => open', [
                        animate('0.5s')
                    ]),
                ]),
            ],
            templateUrl: 'open-close.component.html',
            styleUrls: ['open-close.component.css']
        })
        export class OpenCloseComponent {
            isOpen = true;
            toggle() {
                this.isOpen = !this.isOpen;
            }
        }

       // HTML CODE
       <div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
        <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
       </div>
       // YOu can change the value of isOpen to true or false by 
       // tracking the scroll position

当元素以角度 11 进入可视区域时执行动画

Execute animation when the element enters the viewable area in angular11

animation

angular