主题动画不播放

Question

我正在使用 ABP 2.1.2，在一个表单上我有一些控件隐藏在 <div> 和 *ngIf 中，但是当显示 <div> 时，浮动标签不会没有动画，所以用户的文本与标签文本严重合并。

component.html

<div bsModal #createServiceProviderModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog"
    aria-labelledby="createDigitalAssetModal" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog">    
        <div #modalContent class="modal-content">    
            <div class="modal-header">
                <button type="button" class="close" (click)="close()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                <h4 class="modal-title">
                    <span>{{l("CreateNewServiceProvider")}}</span>
                </h4>
            </div>

            <div id="identify" *ngIf="step == 'identify'">
                <div class="modal-body">
                    <div class="row clearfix">
                        <div class="col-sm-12">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input materialInput id="emailAddress" type="email" name="EmailAddress" [(ngModel)]="serviceProvider.emailAddress" required class="validate form-control">
                                    <label for="emailAddress" class="form-label">{{l("EmailAddress")}}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
                            {{l("Cancel")}}
                        </button>
                    <button class="btn btn-info waves-effect" (click)="findServiceProvider()">
                            {{l("Next")}}
                        </button>
                </div>
            </div>
            <form *ngIf="active" #createServiceProviderForm="ngForm" id="frm_create_serviceProvider" novalidate (ngSubmit)="save()">
                <div id="add" *ngIf="step == 'create'">
                    <div class="modal-body">
                        <div class="row clearfix">
                            <div class="col-sm-12">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <input id="companyName" type="text" name="CompanyName" [(ngModel)]="serviceProvider.companyName" required class="validate form-control">
                                        <label for="companyName" class="form-label">{{l("CompanyName")}}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-sm-6">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <input id="name" type="text" name="Name" [(ngModel)]="serviceProvider.name" required class="validate form-control">
                                        <label for="name" class="form-label">{{l("Name")}}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <input id="surname" type="text" name="Surname" [(ngModel)]="serviceProvider.surname" required class="validate form-control">
                                        <label for="surname" class="form-label">{{l("Surname")}}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <input id="emailAddress" type="text" name="emailAddress" [(ngModel)]="serviceProvider.emailAddress" disabled class="validate form-control">
                                        <label for="emailAddress" class="form-label">{{l("EmailAddress")}}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
                        {{l("Cancel")}}
                    </button>
                        <button [disabled]="!createServiceProviderForm.form.valid || saving" type="submit" class="btn btn-primary waves-effect">
                        {{l("Save")}}
                    </button>
                    </div>
                </div>
                <div id="identify" *ngIf="step == 'confirm'">
                    <div class="modal-body">
                        <span class="text-success">{{l('ServiceProviderAlreadyExists')}}</span>
                        <br>
                        <table class="table">
                            <tr>
                                <td class="col-span-3"><label class="pull-right">{{l('Name')}}</label></td>
                                <td>{{serviceProvider.name}}</td>
                            </tr>
                            <tr>
                                <td><label class="pull-right">{{l('Surname')}}</label></td>
                                <td>{{serviceProvider.surname}}</td>
                            </tr>
                            <tr>
                                <td><label class="pull-right">{{l('Company')}}</label></td>
                                <td>{{serviceProvider.companyName}}</td>
                            </tr>
                            <tr>
                                <td><label class="pull-right">{{l('Email Address')}}</label></td>
                                <td>{{serviceProvider.emailAddress}}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
                            {{l("Cancel")}}
                        </button>
                        <button [disabled]="!createServiceProviderForm.form.valid || saving" type="submit" class="btn btn-primary waves-effect">
                            {{l("Save")}}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

component.ts

import { Component, ViewChild, Injector, Output, EventEmitter, ElementRef } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { ServiceProviderServiceProxy, ServiceProviderDto } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/app-component-base';

@Component({
  selector: 'create-service-provider-modal',
  templateUrl: './create-service-provider.component.html'
})
export class CreateServiceProviderComponent extends AppComponentBase {

    @ViewChild('createServiceProviderModal') modal: ModalDirective;
    @ViewChild('modalContent') modalContent: ElementRef;

    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

    serviceProvider: ServiceProviderDto = new ServiceProviderDto({id: 0, isUser: false});

    step: string = "identify";

    active: boolean = false;
    saving: boolean = false;

    constructor(
        injector: Injector,
        private serviceProviderService: ServiceProviderServiceProxy,
    ) {
        super(injector);
    }

    show(): void {
        this.active = true;
        this.modal.show();
        this.serviceProvider = new ServiceProviderDto({id: 0, isUser: false});
        this.step = "identify";
    }

    onShown(): void {
        $.AdminBSB.input.activate($(this.modalContent.nativeElement));
    }

    save(): void {
        this.saving = true;
        this.serviceProviderService.create(this.serviceProvider)
            .finally(() => { this.saving = false; })
            .subscribe(() => {
                this.notify.info(this.l('SavedSuccessfully'));
                this.close();
                this.modalSave.emit(null);
            });
    }

    close(): void {
        this.active = false;
        this.modal.hide();
    }

    findServiceProvider(): void {
        this.saving = true;       
        abp.ui.setBusy(); 
        this.serviceProviderService.getUserAsProvider(this.serviceProvider.emailAddress)
            .finally(() => {
                this.saving = false;
                abp.ui.clearBusy();
            })
            .subscribe((next) => {                
                console.log(next);
                if (next.id !== undefined) {
                    this.serviceProvider = next;
                    this.step = "confirm";
                }
                else {
                    this.step = "create";
                }
            })
    }
}

问题当显示此模式时，变量 step 设置为 "identify" 并且显示第一部分，用户必须在其中捕获服务提供商的电子邮件地址。当用户单击 'Next' 时，我检查服务提供商是否已经存在，然后将 step 更改为 "create" 或 "confirm"。当显示用于创建服务提供者的 div 时，输入的标签不会动画化

大概我必须重新运行某种动画脚本，但我不知道是什么。请帮忙！

Answer 1

我认为问题是我需要在显示 div

之后调用 onShown()

主题动画不播放

Theme animations don't play

aspnetboilerplate