主题动画无法播放

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设置为“标识”，并显示第一部分，用户必须捕获服务提供商的电子邮件地址。当用户点击“下一步”时，我会检查服务提供商是否已经存在，然后将step更改为“创建”或“确认”。当显示用于创建服务提供者的div时，输入的标签不会设置动画

据推测，我必须重新运行某种动画脚本，但我无法弄清楚是什么。请帮忙！

Answer 1

我认为问题在于我在显示div后需要致电<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">AAA</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">BBB</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">CCC</div> </div>