透明度显示/隐藏过渡 angular8

需求：
    当搜索输入框有值的时候；显示出搜索列表

代码：
// 控制显隐
changeValue(value: any) {
    if (value) {
      this.searchAnimate = true;
    } else {
      this.searchAnimate = false;
    }
  }

 <input
          type="value"
          nz-input
          placeholder="请输入搜索值"
          [(ngModel)]="searchValue"
          (keyup.enter)="search()"
          (ngModelChange)="changeValue($event)"
          class="search-input"
        />


 <div class="simple-search-box" [ngClass]="{ 'animate-opacity': searchValue }">
      <perfect-scrollbar class="height-300">
        <nz-list [nzDataSource]="data" nzBordered [nzRenderItem]="defaultItem">
          <ng-template #defaultItem let-item>
            <nz-list-item>
              <nz-skeleton [nzAvatar]="true" [nzActive]="true" [nzTitle]="false" [nzLoading]="simpleSearch.loading">
                <nz-list-item-meta [nzTitle]="nzTitle" [nzDescription]="nzDesc">
                  <ng-template #nzTitle>
                    <div nz-row nzType="flex" nzJustify="space-between">
                      <a nz-col>jar_name</a>
                      <span nz-col>2020/02/12 12:00</span>
                    </div>
                  </ng-template>
                  <ng-template #nzDesc>
                    <span class="mr">
                      ArifactID: test
                    </span>
                    <nz-divider nzType="vertical"></nz-divider>
                    <span>
                      最新版本: 1.0.0
                    </span>
                  </ng-template>
                </nz-list-item-meta>
              </nz-skeleton>
            </nz-list-item>
          </ng-template>
        </nz-list>
      </perfect-scrollbar>
    </div>

// 样式可以自定义；

.simple-search-box {
  background-color: #fff;
  position: absolute;
  width: 100%;
  z-index: 10;
  margin: 1px 0 0 0;
  opacity: 0;
  filter: Alpha(opacity=0);
  transition: opacity 1s;
}
.animate-opacity {
  opacity: 1 !important;
  filter: Alpha(opacity=100);
}

效果图：

有值显示：

无值：隐藏