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.

Did you find a solution for this? – TheUnreal Apr 04 '18 at 07:45 — TheUnreal, Apr 04 '18 at 07:45
nope, had switched to another issue – Stepan Suvorov Apr 04 '18 at 09:05 — Stepan Suvorov, Apr 04 '18 at 09:05

score 2 · Answer 1 · answered Nov 19 '17 at 10:20

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.

thank you for your answer, I know how to do it with CSS animations, I was looking for Angular way to do it — Stepan Suvorov, Nov 19 '17 at 12:00

score 0 · Answer 2 · edited Apr 29 '20 at 19:51

0

What if you add content: ''?

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

edited Apr 29 '20 at 19:51

M--

25,431
8
61
93

answered Apr 29 '20 at 19:03

Paul Story

582
4
10

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

2 Answers2