2

I am using angular animations and have 2 triggers but only the first trigger works, even when switched around, I've tried to discover why but can't figure it out. My last thought is that maybe because one of the triggers is a child element of another one of the other trigger.

HTML: 

<div class="description" [@changeDivSize]=currentState>
<!-- <div *ngIf="visible"> -->
    <p *ngFor="let service of services | slice:0:3; let i=index" [@slideyP]="currentSlide"> {{service.description}} </p> <!--[@slideyP]=currentSlide-->
<!-- </div> -->

TS: 

animations: [
trigger('changeDivSize', [
  state('initial', style({
    backgroundColor: 'green',
    height: '0',
    overflow: 'hidden'
  })),
  state('final', style({
    backgroundColor: 'red',
    height: '100px'
  })),
  state('slide', style({
    backgroundColor: 'blue',
    height: '100px'
  })),
  transition('* <=> *', animate('500ms ease-in')),
]),
trigger('slideyP', [
  state('slideOne', style({
    transform: 'translateX(0%)'
  })),
  state('slideTwo', style({
    transform: 'translateX(-100%)'
  })),
  state('slideThree', style({
    transform: 'translateX(-200%)'
  })),
  transition('* <=> *', animate('500ms ease-in')),
])
]

Thanks

DevStacker
  • 675
  • 10
  • 23
  • Can you open the chrome dev tools by clicking F12 and see if the animation is attached to the element? – Jonathan Stellwag Feb 25 '19 at 00:31
  • And we also need the js-part where you put in your currentSlide variable. – Jonathan Stellwag Feb 25 '19 at 00:33
  • I think you need use animatechild, see https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#sub-animations-with-animatechild – Eliseo Feb 25 '19 at 07:52
  • Hi thanks for the replies. @Eliseo I have tried using the animateChild but still isn't working as expected. The parent trigger changes the height from 0 to 100px. The child trigger should swipe the information depending on where you click (using translate X). They both work alone (so if height is already 100px then the swipe functionality works) but if the height is 0, the div should expand and swipe at the same time. But the swipe doesn't work, it opens the height and then jumps to the correct place, rather than swiping – DevStacker Mar 03 '19 at 11:05

0 Answers0