Angular 角度：伪元素的动画，如：before，：after

我正在寻找一种方法来为伪元素设置动画，比如：before，：after和角度动画

我尝试使用

查询
：

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

但不幸的是，它没有起作用

这是代码-
我想通过点击制作一个动画：鸟闭上眼睛

不幸的是，我认为目前不存在此功能，因为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>

当您单击div时，它将调用goSleep（）函数，该函数将向已经具有该类eye的元素添加一个名为eye closed的新类

最后，添加相应的css，这允许您控制css伪元素，以及应用所需样式的转换时间。
如果添加
内容：'

谢谢你的回答，我知道如何使用CSS动画，我在寻找角度的方法。在这种情况下使用ngClass更好。你找到解决方案了吗？没有，已经转到另一个问题了
goSleep() {
    let eyes = document.getElementsByClassName('eye');
    for (var i = 0; i < eyes.length; i++) {
        eyes[i].classList.add('eye-closed');
    }
}

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

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