angular - 使用 Fade Out 隐藏 alt 数据和 Fade In 以在 Angular 中一键加载新数据

Question

我想通过一些步骤创建一个导航组件。

情景图

设想：

• 通过单击下一个和上一个按钮或单击每个步骤，在 Item 组件中调用根据该步骤的数据。

• 动画：点击后，首先，以前的数据应该是淡出，新的数据应该是淡入。

  步骤组件中的 TS

import { Component, Input, OnInit, OnChanges } from '@angular/core';

import { NavigationContentModel } from '../data/navigationContentModel';
import { NavigationContent } from '../data/navigationContent';


@Component({
    selector: 'step',
    templateUrl: './step.component.html',
    styleUrls: ['./step.component.css']
})
export class Step implements OnInit, OnChanges {
    step: NavigationContentModel;
    @Input() currentIndex: number;
    content: string;
    headline: string;

    ngOnInit() {
        if (typeof this.currentIndex != 'undefined') {
            this.getCurrentContent(this.currentIndex);
        }
    }

    ngOnChanges() {
        if (typeof this.currentIndex != 'undefined') {
            this.getCurrentContent(this.currentIndex);
        }
    }

    getCurrentContent(index: number) {
        if (typeof this.currentIndex != 'undefined') {
            this.step = NavigationContent.filter(x => x)[index];
            this.headline = this.step.headline;
            this.content = this.step.content;
        }
    }
}

Step 组件中的 HTML 代码

<div class="firstStep__main">
    <div class="firstStep__headLine">
        {{headline}}
    </div>
    <div class="firstStep__content">
        {{content}}
    </div>
</div>

导航组件中的 TS 代码

import { Component, OnInit } from '@angular/core';

import { NavigationContent } from './data/navigationContent';
import { NavigationContentModel } from './data/navigationContentModel';

@Component({
    selector: 'navigation',
    templateUrl: './navigation.component.html',
    styleUrls: ['./navigation.component.css']
})

export class Navigation implements OnInit {

    title: string = 'Schritt 1'
    currentIndex: number = 0;
    isEndStep: boolean = false;
    isFirstStep: boolean = true;
    currentNavigationContent: NavigationContentModel;
    data = NavigationContent;

    constructor() { }

    ngOnInit() {
        this.currentIndex = 0;

    }

    public changeStepByButton(state: number): void {
        this.currentIndex += state;
        this.changeStepByTitle(this.currentIndex);
        this.checkStep();
        this.title = 'Schritt ' + this.currentIndex +1;
    }

    changeStepByTitle(currentIndex: number) {
        this.isEndStep = false;
        this.isFirstStep = false;
        this.currentIndex = currentIndex;
        this.checkStep();
    }

    checkStep() {
        if (this.currentIndex === NavigationContent.length-1) {
            this.isEndStep = true;
            return;
        }

        if (this.currentIndex === 0) {
            this.isFirstStep = true;
            return;
        }
    }
}

导航组件中的 HTML 代码

<div class="navigation-main">
    <div class="navigation-main__steps-contex">
        <div class="navigation-main__head--state">
            <div class="navigation-main__step" *ngFor="let item of data; let i = index"
                 [ngClass]="{'navigation-main__step--active': currentIndex === i}" (click)="changeStepByTitle(i)">
                Schritt {{i+1}}
            </div>
        </div>
        <step [currentIndex]="currentIndex"></step>
    </div>
    <div class="navigation-main__buttons--div">
        <div class="navigation-main__back--button--div">
            <button class="navigation-main__back--button" name="back"
                    [ngClass]="{'navigation-main__button--disable': isFirstStep}" (click)="changeStepByButton(-1)">
                Zurück
            </button>
        </div>
        <div class="navigation-main__next--button--div">
            <button class="navigation-main__next--button" name="next"
                    [ngClass]="{'navigation-main__button--disable': isEndStep}" (click)="changeStepByButton(1)">
                Weiter
            </button>
        </div>
    </div>
</div>

标签： angularanimationfadeinfadeout