javascript - 无法将 angular2 动画设置为 FadeIn

Question

所以我已经搜索并尝试了几个小时。我试图让 html 淡入淡出，但当 ngFor 显示它时，它总是立即不透明度:1，并且永远不会淡出它。淡出不是问题。

@Component({
selector:'c-translation-wizard',
templateUrl: 'scripts/translationWizard/TTranslationWizard.html',
animations: [
    trigger('flyInOut', [
        state('active', style({ opacity: 1 })),
        state('inactive', style({ opacity: 0 })),
        transition('active => inactive', [
            style({ opacity: 0 }),
            animate('0.7s ease-out')
        ]),
        transition('inactive => active', [
            animate('0.7s ease-in', style({ opacity: 1 }))
        ]),
        transition('void => *', [
            style({ opacity: 1 }),
            animate('0.7s ease-in')
        ]),
        transition('* => void', [
            animate('0.7s ease-out', style({ opacity: 0 }))
        ]),
        transition('void => active', [
            style({ opacity: 1 }),
            animate('0.7s ease-in')
        ]),
        transition('inactive => void', [
            animate('0.7s ease-out', style({ opacity: 0 }))
        ])
    ])
])
export class CTranslationWizard implements InterfaceLocalStorage, OnInit, OnDestroy {

results : CTranslationWizard_results[];
result$ : any;
importExport : string;
type: string;
errors : string[] = [];
log : Logger;
sHtsTranslation : SHtsTranslation;
toggle = false;
gA : any;

constructor(GoogleAnalytics : GoogleAnalytics,
            log : Logger,
            sHtsTranslation : SHtsTranslation
){
    this.log = log;
    this.gA = GoogleAnalytics;
    this.sHtsTranslation = sHtsTranslation;
    this.importExport = "export";
    this.results = [];

    this.type = '-';
    //LocalStorage.getItem(this);
}


setImportExport(value : string){
    this.importExport = value;
}

onlyNumberic(ip:string) : boolean{
    let isNumber : boolean =  /^\d+$/.test(ip);
    return isNumber;
}

isEightTenDigits(ip:string) : boolean{
    let isET : boolean = (ip.length == 8 || ip.length == 10);
    return isET;
}

isSixDigits(ip:string) : boolean {
    let isET : boolean =  (ip.length == 6);
    return isET;
}

isFiveDigits(ip:string) : boolean{
    let isET : boolean =  ip.length == 5;
    return isET;
}

errorText() {
    let err : string[] = [];
    err.push("An SITC number can only be 5 digits long");
    err.push("An NAICS number can only be 6 digits long");
    err.push("An HTC number can only be 8 or 10 digits long.");
    return err;
}

getType(value : string) : string {
    if(this.onlyNumberic(value)) {
        let val : number = parseInt(value);
        let type : string = getType(val);
        return (type ? type : "-");
    } else {
        return '-';
    }
}

validateInput(value : string) : string[] {
    let err : string[] = [];

    if(!this.onlyNumberic(value)){
        err.push("Only numeric characters maybe used.");
        return err;
    }

    let eightTen : boolean = this.isEightTenDigits(value);
    if(eightTen) {
        return [];
    }

    let six : boolean = this.isSixDigits(value);
    if(six) {
        return [];
    }

    let five : boolean = this.isFiveDigits(value);
    if(five) {
        return [];
    }

    return this.errorText();
}

submit(value : string) {

    this.gA.pageEvent(
        "info",
        "click",
        "translationWizard_submitButton",
    );

    this.errors = this.validateInput(value);
    if(this.errors.length == 0){

        let val : number = parseInt(value);
        //do query for results, delete this
        //hit service get result
        //this.results.push(new MImportExport('htic',12345678,this.outputType, 12345, 12345));
        this.sHtsTranslation.htsTranslation(val, this.importExport, 101);
        //save the new model to local storage
        //LocalStorage.setItem(this);

    }
}

removeByIndex(index : number){

    this.gA.pageEvent(
        "info",
        "click",
        "translationWizard_removeButton"
    );
    this.results.splice(index,1);

}

removeAll(){
    this.gA.pageEvent(
        "info",
        "click",
        "translationWizard_removeAllButton"
    );
    this.results.splice(0);
}

//OnInit, OnDestroy interfaces
ngOnInit(){
    this.result$ = this.sHtsTranslation.htsTranslation$.subscribe(
        (modelHts : ModelHts) => {
            this.log.debug(this, "pushing modelHts into results");
            this.results.unshift(modelHts);
        });
    this.log.debug(this, "sHtsTranslation subscribed");
}

ngOnDestroy(){
    if(this.result$){
        this.result$.unsubscribe();
        this.log.debug(this, "sHtsTranslation unsubscribed");
    }
}

//interface LocalStorage
getExclusionList(): string[] {
    return ['errors','outputType', 'gA', 'sHtsTranslation'];
}

}

export interface CTranslationWizard_results {
inputNumber : number;
inputType : string;
resultsForIE : [{
    htc8 : number,
    htc10 : number,
    sitc : number,
    naics : number
}]
}


<table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Input Type</th>
                            <th>Input Number</th>
                            <th>I/E</th>
                            <th class="fixed">SITC</th>
                            <th class="fixed">NAICS</th>
                            <th class="fixed">HTC-8</th>
                            <th class="fixed">HTC-10</th>
                            <th>
                                <button
                                        (click)="removeAll()"
                                        type="button"
                                        id="translationWizard_removeAllButton"
                                        class="btn btn-default remove start end">
                                        <span
                                            class="glyphicon glyphicon-trash"
                                            aria-hidden="true">
                                        </span>
                                </button>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let modelHts_ of results; let i = index;"
                            [@flyInOut]="modelHts_.state">
                            <th scope="row">{{i}}</th>
                            <td>{{modelHts_.inputType}}</td>
                            <td>{{modelHts_.inputNumber}}</td>
                            <td>{{modelHts_.importExport}}</td>
                            <td class="table-nested" colspan="4">
                                <table class="table table-bordered table-hover">
                                    <tr *ngFor="let resultForIE of modelHts_.resultsForIE;">
                                        <td class="fixed">{{resultForIE.sitc}}</td>
                                        <td class="fixed">{{resultForIE.naics}}</td>
                                        <td class="fixed">{{resultForIE.htc8}}</td>
                                        <td class="fixed">{{resultForIE.htc10}}</td>
                                    </tr>
                                </table>
                            </td>
                            <th>
                                <button
                                    (click)="removeByIndex(i)"
                                    type="button"
                                    id="translationWizard_removeButton"
                                    class="btn btn-default remove start end">
                                        <span
                                            class="glyphicon glyphicon-remove"
                                            aria-hidden="true">
                                        </span>
                                </button>
                            </th>
                        </tr>
                    </tbody>
                </table>

在上面的模板中，这段代码应该在添加到数组时淡入。

<tr *ngFor="let modelHts_ of results; let i = index;"
                                [@flyInOut]="modelHts_.state">

有什么想法吗？谢谢

Answer 1

动画模块的新手，但是，我不想将 View 状态变量嵌入到来自服务器的数据模型中，因为可能有很多 View 使用该模型(从我的 Angular 来看这不是一个好主意) .

动画对于 VOID 状态和 NgFor 似乎很困惑。我会尽力使这个解释尽可能简单。

VOID 状态是未应用 Angular 变换的 html + 样式。在这种情况下，ngFor 将元素添加到 dom，然后更改状态并应用样式以转到该状态。如果 [@flyInOut]='active' 且 style="opacity:0;"在元素上(当由 ngFor 添加时)它将转换为 opacity:1。

但是，当 ngFor 从 dom 中移除时，它不会转换回 void 状态。相反，我必须手动转换变量来控制状态，并设置一个计时器以在动画完成后将其从数组 (ngFor) 中删除。

以下是对上述代码的最终更改，可实现进出工作转换。

<tr #localRow
                            style="opacity: 0"
                            title="true"
                            *ngFor="let modelHts_ of results; let i = index;"
                            [@flyInOut]="localRow.title">

我将元素上的“标题”绑定(bind)为控制局部变量状态的变量(无需在 modelHts_ 中嵌入状态 Controller )。

<button
                                    (click)="localRow.title = removeByIndex(i)"
                                    type="button"
                                    id="translationWizard_removeButton"
                                    class="btn btn-default remove start end">
                                        <span
                                            class="glyphicon glyphicon-remove"
                                            aria-hidden="true">
                                        </span>
                                </button>

删除元素的按钮会更改标题/状态。

        state('true', style({ opacity: 1 })),
        state('false', style({ opacity: 0 })),
        transition('void => true', [
            animate('.75s')
        ]),
        transition('true => void', [
            animate('.75s')
        ]),
        transition('true => false', [
            animate('.75s')
        ]),
        transition('false => true', [
            animate('.75s')
        ])


    removeByIndex(index : number) : boolean{

    this.gA.pageEvent(
        "info",
        "click",
        "translationWizard_removeButton"
    );
    setTimeout(()=> {
        this.results.splice(index,1);
    },1000);
    return false;
}

在 Controller 中，我设置了一个超时，以便在动画完成转换状态后从数组中删除该项目。

有人看出我错在哪里了吗？或者这是 ngFor 的一个错误(应该转换到 VOID 状态)。

此外，对于不将状态嵌入模型的其他建议，我们将不胜感激......通过评论。