Angular: Animations for pseudo-elements like :before, :after

Question

I'm looking for the way to animate pseudo-elements like :before, :after with Angular animations.

I tried to do with a query:

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

but unfortunately, it did not work.

Here is the code - https://stackblitz.com/edit/angular-ofa3wa I want to make an animation by click: the bird closes eyes.

Answer 1

Unfortunately I don't think this feature exists at this time, since CSS pseudo-elements are not actually part of the DOM.

I know you were asking about Angular Animations, but another way to do this would be like this :

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;
}

When you click the the div, it calls the goSleep() function, which add a new class called eye-closed to the elements that already have the class eye.

And finally, you add the css corresponding, which allows you to control the CSS pseudo-elements, and the transition time to apply the styles you want.