Angular 4.2+ animations query for .class::after

Admin 1
Viewed 708

I am working on an Angular project which involves using Angular animations. I would like to target an element with; hr.star-light::after Here is my code;

export const routerTransition = trigger('routerTransition', [
  transition('* <=> *', [
    ...
    group([
      ...
      query('hr.star-light::after', [
        style({
          opacity: 0,
          transform: 'translateY(-20%)'
        }),
        animate(500, style({
          opacity: 1,
          transform: 'translateY(0%)'
        }))
      ], {
        optional: true
      })
    ])
  ]),
  ...
])

I want to target the element and apply animation on it when it enters the scene. Here it does not seem to work.

angular javascript
1 Answers

I believe pseudo-classes will not work as it is still an open feature request on GitHub which you can check it out here.

Your best bet for now is to add a wrapper around your element to avoid targeting your element in your query using any pseudo-classes.

user_26029620
Related