角度：擬似要素のアニメーション：before、：after

Question

私は擬似要素をアニメーション化する方法を探しています：before、after after Angular animations。

私はqueryで実行しようとしました：

trigger('myanimation', [ 
    query('.myclass:after', style({ top: 10px })) 
]) 

が、残念ながら、それは動作しませんでした。

ここにコードがあります - https://stackblitz.com/edit/angular-ofa3wa 私はクリックでアニメーションを作りたいです：鳥が目を閉じます。

Answer 1

CSSの擬似要素が実際にDOMの一部ではないので、残念ながら、私は、この機能は現時点では存在しているとは思いません。

私はあなたが角度のアニメーションについて尋ねた知っているが、これを行うための別の方法は次のようになります：

app.component.html

<div class="globe" (click)="goSleep()"> 
    <div class="bird"> 
     <div class="body"> 
     <div class="eye left"></div> 
     <div class="eye right"></div> 
     <div class="beak"><div></div></div> 
     <div class="feet"></div> 
     <div class="wire"></div> 
     </div> 
    </div> 
</div> 

app.component.ts

goSleep() { 
    let eyes = document.getElementsByClassName('eye'); 
    for (var i = 0; i < eyes.length; i++) { 
     eyes[i].classList.add('eye-closed'); 
    } 
} 

app.component.scss

.eye-closed::after { 
    top: 0px !important; 
    transition-property: top; 
    transition-duration: 2s; 
    transition-timing-function: linear; 
} 

あなたはdiv要素をクリックすると、それはgoSleep（）関数を呼び出し、すでにクラス目を持っている要素に目を閉じと呼ばれる新しいクラスを追加しています。

最後に、CSSの擬似要素を制御できるCSS対応を追加し、必要なスタイルを適用するための移行時間を追加します。