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

Question

我正在寻找动画伪元素的方法，例如：之前，之后使用Angular动画。

我尝试使用query：

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

但不幸的是，它没有用。

以下是代码 - https://stackblitz.com/edit/angular-ofa3wa 我想通过点击制作动画：鸟儿闭上眼睛。

Answer 1

不幸的是，我不认为此功能目前存在，因为CSS伪元素实际上不是DOM的一部分。

我知道你在询问Angular Animations，但另一种方法就是这样：

<强> 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（）函数，该函数将一个名为 eye-closed 的新类添加到已经具有类 eye 的元素中

最后，添加相应的css，它允许您控制CSS伪元素，以及应用所需样式的过渡时间。

Answer 2

如果添加content: ''怎么办？

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