不能用淡入/淡出效果替换其他内容吗？

Question

我有多步垂直表单向导，在第一步中，我有5-6个表单域和一个“下一步”按钮。所有表单字段均替换为标签，该标签的表单字段输入值带有淡出动画。现在，我尝试做相反的情况，即当我单击该向导步进器上的“编辑”按钮时，所有标签应再次用动画替换为表单。但我无法实现这一目标。

我的第一步向导的component.html在这里

<div class="f-stepped-group" id="g1">
    <div class="row">
      <div class="col-xs-12 col-sm-3">
        <div class="f-form-step">
          <a>
            <p class="f-form-step-label f-asap-font-family f-asap-font-bold">
              <i class="fa fa-address-card" aria-hidden="true"></i>
            </p>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-9">
        <div class="f-form-stepper-container" id="signup-1">
          <p class="f-asap-font-family f-asap-font-bold">
            {{'SIGN_UP.FORM_WIZARD.PERSONAL_TAB_HEADING' | translate}}</p>
          <div class="collapse-div" id="f-wizard-display-block">
            <form [formGroup]="singupForm">
              <fieldset formGroupName="personal_info">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="exampleFormControlSelect1">{{'SIGN_UP.PERSONAL_DATA_TAB.SALUTATION' | translate}}</label>
                      <select class="form-control" id="exampleFormControlSelect1" formControlName="salutation">
                        <option value="mr">Mr</option>
                        <option value="mrs">Mrs</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="exampleFormControlSelect1">{{'SIGN_UP.PERSONAL_DATA_TAB.TITLE' | translate}}</label>
                      <select class="form-control" id="exampleFormControlSelect1" formControlName="title">
                        <option>Dr.</option>
                        <option>Prof.</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="exampleInputEmail1">{{'SIGN_UP.PERSONAL_DATA_TAB.FIRST_NAME' | translate}}</label>
                      <input type="text" class="form-control" id="exampleInputEmail1" formControlName="firstname" aria-describedby="emailHelp"
                        placeholder="{{'SIGN_UP.PERSONAL_DATA_TAB.FIRST_NAME_PLACEHOLDER' | translate}}" (keypress)="onlyChars(event)">
                      <div class="alert alert-danger" *ngIf="singupForm.get('personal_info.firstname').touched && singupForm.get('personal_info.firstname').invalid && singupForm.get('personal_info.firstname').errors.required">
                        First Name is required
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="exampleInputEmail1">{{'SIGN_UP.PERSONAL_DATA_TAB.SURNAME' | translate}}</label>
                      <input type="text" class="form-control" id="exampleInputEmail1" formControlName="surname" aria-describedby="emailHelp" placeholder="{{'SIGN_UP.PERSONAL_DATA_TAB.SURNAME_PLACEHOLDER' | translate}}"
                        (keypress)="onlyChars(event)">
                      <div class="alert alert-danger" *ngIf="singupForm.get('personal_info.surname').touched && singupForm.get('personal_info.surname').invalid && singupForm.get('personal_info.surname').errors.required">
                        Surname is required
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <label for="exampleInputEmail1">{{'SIGN_UP.PERSONAL_DATA_TAB.COMPANY' | translate}}</label>
                      <input type="email" class="form-control" id="exampleInputEmail1" formControlName="company" aria-describedby="emailHelp" placeholder="{{'SIGN_UP.PERSONAL_DATA_TAB.COMPANY_PLACEHOLDER' | translate}}"
                        (keypress)="onlyChars(event)">
                      <div class="alert alert-danger" *ngIf="singupForm.get('personal_info.company').touched && singupForm.get('personal_info.company').invalid && singupForm.get('personal_info.company').errors.required">
                        Comapny is required
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <label for="exampleInputEmail1">Email</label>
                      <input type="email" class="form-control" id="exampleInputEmail1" formControlName="email" aria-describedby="emailHelp" placeholder="{{'SIGN_UP.PERSONAL_DATA_TAB.EMAIL_PLACEHOLDER' | translate}}">
                      <div class="alert alert-danger" *ngIf="singupForm.get('personal_info.email').touched && singupForm.get('personal_info.email').invalid">
                        <div *ngIf="singupForm.get('personal_info.email').errors.required">Email is required</div>
                        <div *ngIf="singupForm.get('personal_info.email').errors.email && !singupForm.get('personal_info.email').errors.required">Enter valid email</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="exampleInputEmail1">{{'SIGN_UP.PERSONAL_DATA_TAB.PHONE' | translate}}</label>
                      <input type="number" class="form-control" id="exampleInputEmail1" formControlName="phone" aria-describedby="emailHelp" placeholder="{{'SIGN_UP.PERSONAL_DATA_TAB.PHONE_PLACEHOLDER' | translate}}">
                      <div class="alert alert-danger" *ngIf="singupForm.get('personal_info.phone').touched && singupForm.get('personal_info.phone').invalid && singupForm.get('personal_info.phone').errors.required">
                        Phone Number is required
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="exampleInputEmail1">DOB</label>
                      <input type="date" class="form-control" id="exampleInputEmail1" formControlName="dob" aria-describedby="emailHelp" placeholder="Enter date Of birth">
                      <div class="alert alert-danger" *ngIf="singupForm.get('personal_info.dob').touched && singupForm.get('personal_info.dob').invalid && singupForm.get('personal_info.dob').errors.required">
                        Dob Number is required
                      </div>
                    </div>
                  </div>
                  <button class="btn  f-secondary-btn-color nextBtn-3 float-right" type="button" (click)="nextBtn(1,'g1')" [disabled]="!singupForm.get('personal_info').valid">{{'SIGN_UP.FORM_WIZARD.NEXT_BTN' | translate}}</button>
                </div>
              </fieldset>
            </form>
          </div>
          <div class="onShowLabels">
            <div class="container">
              <div class="row">
                <div class="col-md-6">
                  <div class="row">
                    <div class="col-md-8">
                      <label class="f-asap-font-family">First Name :</label>
                      <label class="f-asap-font-family">{{masterObj?.personal_info.firstname}}</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-8">
                      <label class="f-asap-font-family">Surname : </label>
                      <label class="f-asap-font-family">{{masterObj?.personal_info.surname}}</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-8">
                      <label class="f-asap-font-family">Email : </label>
                      <label class="f-asap-font-family">{{masterObj?.personal_info.email}}</label>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="row">
                    <div class="col-md-9">
                      <label class="f-asap-font-family">Company :</label>
                      <label class="f-asap-font-family">{{masterObj?.personal_info.company}}</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-9">
                      <label class="f-asap-font-family">Phone : </label>
                      <label class="f-asap-font-family">{{masterObj?.personal_info.phone}}</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-9">
                      <label class="f-asap-font-family">DOB : </label>
                      <label class="f-asap-font-family">{{masterObj?.personal_info.dob}}</label>
                    </div>
                  </div>
                </div>
              </div>
              <button class="btn f-primary-btn-color" (click)="editBtn(1,'g1')">Edit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

将表单字段替换为标签的动画正在工作，其代码在此处

component.ts

nextBtn(index, group) {
    var $this = $("#signup-" + index).find('div.collapse-div');
    var ele = $("#signup-" + index).find('div.onShowLabels');
    $this.fadeOut('slow', function () {
        $("#signup-" + index).addClass('f-header-bg f-secondary-font-color');
        $("#signup-" + index + " > p").addClass('f-secondary-font-color');
        $("#signup-" + index).find('div.onShowLabels').addClass('f-header-bg');
        $("#" + group).find('.f-form-step').addClass('f-header-bg');
        $("#" + group).find('.f-form-step i').addClass('f-fa-white');
        $this.replaceWith(ele);
        ele.hide().fadeIn('slow');
    });
    $(this).off('click');
    $("#signup-" + (index + 1)).find('div#tog1').slideDown("slow").delay(1500);
    this.masterObj = this.singupForm.value;
}

此处的编辑代码无法正常工作。

editBtn(index, group) {
    var $this = $("#signup-" + index).find('div.onShowLabels');
    var ele = $("#signup-" + index).find('div.collapse-div');
    $this.fadeOut('slow', function () {
        // $("#signup-" + index).find('div.collapse-div').css({ "display": "visible !important" });
        $("#signup-" + index).find('div.collapse-div').attr('id', 'f-wizard-display-block');
        $("#signup-" + index).removeClass('f-header-bg f-secondary-font-color');
        $("#signup-" + index + " > p").removeClass('f-secondary-font-color');
        $("#signup-" + index).find('div.onShowLabels').removeClass('f-header-bg');
        $("#" + group).find('.f-form-step').removeClass('f-header-bg');
        $("#" + group).find('.f-form-step i').removeClass('f-fa-white');
        $this.replaceWith(ele);
        ele.hide().fadeIn('slow');
    });
}

当前，当我单击“编辑”时，所有具有字段值的标签都会消失，并且不会出现任何表单字段。我正在使用带有angular5的jQuery。