6

I tried to add animation on the parent component so when child components :enter or :leave, a sliding effect would show. Here is my parent @component:

  @component({
   selector: 'plan',
   templateUrl: '../templates/plan.tpl.html',
   styleUrls: ['../../../../assets/css/plan.scss'],
   animations: [
     trigger('stepAnimation', [
       transition(':enter', [
         style({transform: 'translateX(100%)'}),
         animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
       ]),
    transition(':leave', [  // before 2.1: transition('* => void', [
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
    ])
  ])]

})

Then I added the animation selector to the child component in the template as follow:

<start *ngIf="currentPage == 'start'" @stepAnimation></start>
<about *ngIf="currentPage == 'about'" @stepAnimation></about>
<family *ngIf="currentPage == 'family'" @stepAnimation></family>

The animation doesn't work. Then I add the animation code inside each component and add @stepAnimation to the parent tag of each template. This way, I get the enter animation but not leave. I guess that's because of the ngIf on the parent but regardless, there are a lot of repeat animation code with this. Would there be anyway to handle the animation on the parent level?

Kim Kern
  • 54,283
  • 17
  • 197
  • 195
Adam Boostani
  • 5,999
  • 9
  • 38
  • 44
  • did you find a solution to this? some other alternative different than copy/paste or using pure css? – Deian Oct 05 '21 at 14:16

1 Answers1

4

The problem is that the custom elements, <start>, <family>, and <about> have no styling and therefore display defaults to inline, which can't be translated. Simply add this to your parent stylesheet:

about, start, family {
    display: block;
    /*Any other layout code, e.g. position:absolute */
}

And it should work.

Mikayla Maki
  • 473
  • 6
  • 18
  • Sadly, there is [no way](https://stackoverflow.com/questions/31480950/custom-element-selector) to select all custom elements. A class or data attribute could work though. – Mikayla Maki Jul 06 '17 at 04:25