For a presentation page I want to display the content of my page element by element with Angular animations

My goal was to make an animation that hides my content and make an animation for each element but my content is well hidden (:self) but the other animations have no effect until the end of the animation where all my content appears at once

animations : [ 
    trigger('homeAnimations', [
      transition(':enter', [
        query(':self',[
          style({opacity:0})
        ]),
        query('#presentation h1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation h2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation p', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn3', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
      ])
    ])
  ],

For a presentation page I want to display the content of my page element by element with Angular animations

My goal was to make an animation that hides my content and make an animation for each element but my content is well hidden (:self) but the other animations have no effect until the end of the animation where all my content appears at once

animations : [ 
    trigger('homeAnimations', [
      transition(':enter', [
        query(':self',[
          style({opacity:0})
        ]),
        query('#presentation h1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation h2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation p', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn3', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
      ])
    ])
  ],

• angular
• angular-animations

Share Improve this question Follow asked Mar 4 at 12:47 KoZ x TrickyKoZ x Tricky 1333 bronze badges 1

• please share the minimal reproducible code, working stackblitz (If possible), steps to replicate the issue and expected output. – Naren Murali Commented Mar 4 at 12:49

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

If your elements are the children of the :self, the child will not be displayed without the parent being visible.

Solution: first hide the children:

animations : [ 
    trigger('homeAnimations', [
      transition(':enter', [
        // hide elements that you do not want to display:
        query('#presentation h1', [
          style({opacity:0})
        ], { optional: true }),
        query('#presentation h2', [
          style({opacity:0})
        ], { optional: true }),
        query('#presentation p', [
          style({opacity:0})
        ], { optional: true }),
        query('#btn1', [
          style({opacity:0})
        ], { optional: true }),
        query('#btn2', [
          style({opacity:0})
        ], { optional: true }),
        query('#btn3', [
          style({opacity:0})
        ], { optional: true }),

        // show them using transition animation:
        query('#presentation h1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation h2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation p', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn3', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
      ])
    ])
  ],