動畫不再觸發Angular 4+

使用Angular動畫，並且很長一段時間它工作正常，現在它只是停止。沒有錯誤，只是沒有解僱。動畫不再觸發Angular 4+

我定義的轉換和像這樣規定：

@Component({ 
    animations: [ 
    trigger('form2Head',[ 
     state('hidden', style({ 
      transform: 'translateY(-85%)' 
     })), 
     state('shown', style({ 
     transform: 'translateY(0)', 
     })), 
     transition('hidden <=> shown', animate('300ms ease-in')), 
    ]), 
    ],

和定義動畫像這樣在我的組件的HTML綁定：

<div class="container" id="mainOuter" [@form2Head]='showModal'> 
    <div class="container" id="mainInner"> 
    <form class='frm'> 
     <h1>Please Enter Your Access Code:</h1> 
     <label for="AccessCode">Access Code:</label> 
     <input type="text" name='AccessCode' placeholder="Access Code" [(ngModel)]='AccessCode'> 
     <button class="submit" (click)='routeConfirm(AccessCode)'>Submit</button> 
    </form> 
    <div class="straggler"> 
     <i class="fa fa-gear" id='reset'(click)='animate()'></i> 
     <h1 class="sweeptitle">--- Title Of Sweep ---</h1> 
     <h1 class="tagline">--- Tagline ---</h1> 
    </div> 
    </div> 
</div> 
<div class="modalContainer"[@form2Head]='showModal' *ngIf='clicked==true'> 
    <app-confirm [Id]='AccessCode'></app-confirm> 
</div>

和控制組件TS文件動畫像這樣：

animate(): void{ 
    this.showModal = (this.showModal === 'hidden'? 'shown': 'hidden'); 
    console.log(this.showModal); 
    }

and

當它與* ngIf應用

clicked: boolean = false; 
    routeConfirm = function(): void{ 
    this.clicked = !this.clicked; 
    this.animate(); 
    } 
}

不知道爲什麼它會停止，雖然...

來源

2017-07-31 Chris Rutherford

您是否在class =「container」或id =「mainOuter」上添加了新屬性？就像在樣式表中翻譯一樣。 – Vega

我不確定你在問什麼，我正在使用Angular Animations模塊來處理動畫。它全部由打字稿控制，而不是在CSS中控制。雖然我的初始職位是在CSS中。 –

我自己解釋一下：組件樣式表中是否有任何翻譯？和相關與否：class =「modalContainer」[@form2Head] ='showModal'需要間隔 – Vega

角不顯示動畫。在div上用* ngIf封裝一個包裝並在其上應用動畫

來源

2017-07-31 19:28:04 Vega

或者如果您不想交替使用標記，則可以在動畫的兩個元素上使用'* ngIf'並使用'：enter'和'：leave'轉換。 – cyrix

我將'* ngIf'移至'app-confirm'標籤，以便它只適用於組件標籤而不適用於包含div。還是行不通.... –

動畫不再觸發Angular 4+

回答

相關問題