Css Angular4动画未在ngIf上设置动画：输入

Running Angular 4.4.6：我有一个多幻灯片“Onboard”组件，我希望在显示特定幻灯片后，稍微延迟一点设置div的dom入口动画。我使用在setTimeout内切换的“showUIgraphic”布尔属性绑定了一个*ngIf，它在3秒延迟后按预期呈现。但是，我似乎无法获得动画触发器来应用样式转换。请参阅html中的第31行（*ngIf=“slideIndex==3”）

我对Angular（和一般的开发）比较陌生，所以如果我没有很好地描述这个问题，请原谅我

我已经在stackoverflow和Google上搜索了几个小时，但什么都没用。我还尝试过使用'void=>*'和不同的状态定义进行自定义转换，但没有成功

任何帮助都将不胜感激

打字稿：

import {Component, OnInit} from '@angular/core';
import '../../../../assets/js/ammap.js';
import '../../../../assets/js/worldLow.js';

import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
import {
  trigger,
  state,
  style,
  transition,
  animate,
  keyframes,
  group
} from '@angular/animations';

import {Router} from '@angular/router';
import {AccessService} from '../../../services/access.service';
import {AuthService} from '../../../services/auth.service';
import {Angular2TokenService} from 'angular2-token';

declare var $: any;

@Component({
  selector: 'app-onboarding',
  templateUrl: './onboarding.component.html',
  animations: [
   trigger(
     'UIgraphic', [
        transition(
          ':enter',
          [style({opacity: 0}),
            animate('3s ease-out',
            style({opacity: 1}))
          ]
        )
      ]
    )
  ]
})

export class OnboardingComponent implements OnInit  {

  slideIndex:number = 1;
  showUIgraphic = false;

  constructor(
    public authToken: Angular2TokenService,
    public access: AccessService,
    public authService: AuthService,
    public router: Router) {};

  ngOnInit() {
    this.access.headerSubject.next(false);
    this.access.footerSubject.next(false);
  }

  goForward() {
    this.slideIndex = ++this.slideIndex;

    console.log(this.slideIndex);

    if (this.slideIndex === 3){
      setTimeout(()=>{
        this.showUIgraphic = true;
      }, 3000);

    } else {
      this.showUIgraphic = false;
    }
  }

  goBackward() {
    this.slideIndex = --this.slideIndex;
    if (this.slideIndex === 3){
      setTimeout(()=>{
        this.showUIgraphic = true;
      }, 3000);

    } else {
      this.showUIgraphic = false;
    }

  }

  public config: SwiperConfigInterface = {
    direction: 'horizontal',
    slidesPerView: 'auto',
  }

}

html:

欢迎来到
构建有意义遗产的社交日志平台
我们的热情是通过
给你一个系统，让你有意识地为未来的几代人构建你持久的生活故事


这个平台有一些工具可以帮助。。。

了解您的旅程

今天出席
有目的地向前看
路由


感激之情

自豪时刻

ATCs

反思

指导原则

家族

返回
下一个

<div class="container onboarding-container">
  <div class="panel">
    <div class="intro-slider-container">

      <div *ngIf="slideIndex === 1">

        <h2 class="content-full onboarding-font text-center">Welcome to</h2>
        <div class="content-full flex-all-center">
          <div style="width: 250px; height: 400px; background-color: silver;">
            <img class="content-full" alt="Ultimately-logo" src="assets/images/logo-small.png"/>
          </div>
        </div>
        <div class="panel-body">
          <p class="onboarding-font text-center">The social journaling platform that builds a meaningful legacy</p>
        </div>

      </div>

      <div *ngIf="slideIndex === 2">

        <div class="content-full flex-all-center">
          <div class="panel-body">
            <p class="onboarding-font text-center">Our passion is helping you live a more satisfying life <i>today</i> by
              giving you a system to consciously build your enduring life story for the generations of <i>tomorrow</i>
            </p>
          </div>
        </div>

      </div>

      <div *ngIf="slideIndex === 3">

        <div class="content-full flex-all-center">
          <div class="panel-body">
            <p class="onboarding-font text-center">
              The platform has tools to help...
            </p>

            <!-- Attribute slider below  -->

            <!-- <div class="swiper-container"> -->
              <div class="swiper-wrapper">
                <swiper [config]="config" style="width:426.5px;">
                  <!-- dynamically set width with a script later -->
                  <div class="swiper-slide">
                    <div class="swiper-slide-content">
                      <div class="flex-all-center onboarding-Box-Styling attribute-container attributeOne">
                        <p class="attributeFont">Appreaciate your journey</p>
                      </div>
                    </div>
                  </div>

                  <div class="swiper-slide">
                    <div class="swiper-slide-content">
                      <div class="flex-all-center onboarding-Box-Styling attribute-container attributeTwo">
                        <p class="attributeFont">Be present today</p>
                      </div>
                    </div>
                  </div>

                  <div class="swiper-slide">
                    <div class="swiper-slide-content">
                      <div class="flex-all-center onboarding-Box-Styling attribute-container attributeThree">
                        <p class="attributeFont">Look forward with purpose</p>
                      </div>
                    </div>
                  </div>

                </swiper>
              </div>
            <!-- </div> -->

            <!-- UI Model below  -->

            <div @UIgraphic *ngIf="showUIgraphic" class="legacyTemplate onboarding-Box-Styling">
              <div class="route-row">
                <div class="routeTemplate">
                  <div class="templateTagContainer flex-all-center onboarding-Box-Styling">
                    <p class="attributeFont text-center">Route</p>
                  </div>
                </div>
                <div class="travelsTemplate">
                  <div class="templateTagContainer flex-all-center onboarding-Box-Styling">
                    <p class="attributeFont text-center">Travels</p>
                  </div>
                </div>
              </div>
              <div class="reflection-row">
                <div class="gratitude-col">
                  <div class="gratitudeTemplate">
                    <div class="templateTagContainer flex-all-center onboarding-Box-Styling">
                      <p class="attributeFont text-center">Gratitude</p>
                    </div>
                  </div>
                  <div class="proudMomemntsTemplate">
                    <div class="templateTagContainer flex-all-center onboarding-Box-Styling">
                      <p class="attributeFont text-center">Proud Moments</p>
                    </div>
                  </div>
                  <div class="atcsTemplate">
                    <div class="templateTagContainer flex-all-center onboarding-Box-Styling">
                      <p class="attributeFont text-center">ATCs</p>
                    </div>
                  </div>
                </div>

                <div class="reflection-col">
                  <div class="reflectionsTemplate">
                    <div class="templateTagContainer flex-all-center onboarding-Box-Styling">
                      <p class="attributeFont text-center">Reflections</p>
                    </div>
                  </div>
                  <div class="gPsTemplate">
                    <div class="templateTagContainer flex-all-center onboarding-Box-Styling">
                      <p class="attributeFont text-center">Guiding Principles</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="family-row">

                <div class="familyTemplate">
                  <div class="templateTagContainer flex-all-center onboarding-Box-Styling">
                    <p class="attributeFont">Family</p>
                  </div>
                </div>
              </div>

            </div>

          </div>
        </div>

      </div>

    </div>
    <button style="display: inline-block;" class="btn btn-primary" *ngIf="slideIndex !== 1" (click)="goBackward()">Back</button>
    <button style="display: inline-block;" class="btn btn-primary" *ngIf="slideIndex !== 4" (click)="goForward()">Next</button>
  </div>
</div>