How to animate a <tr> opening/closing up and down with automatic property calculation

380 views

Skip to first unread message

Kevin Quiring

unread,

Oct 4, 2016, 1:36:07 PM10/4/16

to AngularJS

0 down vote favorite

I have a table row that is not visible until you click a "view details" button on the row above it. Currently I am using *ngIf to display the second row and changing a boolean property of the bound object when the "View details" button is clicked. I have read through the animations page on the angular2 documentation and tried to implement a "collapse/uncollapse" animation so that when the 2nd table row becomes visible it animates from 0px height -> the height of the row fully expanded (*px).

The closest example I saw to what I want to do was this animation which removed the hero from however tall it was (*px) to 0px and it collapsed/slid upwards smoothly.

animations: [
 trigger('shrinkOut', [
  state('in', style({height: '*'})),
  transition('* => void', [
    style({height: '*'}),
    animate(250, style({height: 0}))
  ])
 ])
]

I can't get this to work for my situation described above. I tried it in combination with *ngIf and that didn't work. (The row just instantly opens/closes like it was before adding the animation.) I tried getting rid of *ngIf and binding to the [hidden] property with no success. I also tried removing *ngIf and [hidden] and just having the animation but that didn't work either (the row just stayed open and never closed.)

My 2nd table row HTML looks like:

<tr [@visibilityChanged]="visibility">
      <td  colspan="8" class="details-row">
          ...
      </td>
</tr>

My animation looks like:

trigger('visibilityChanged', [
  state('hidden', style({height: '*'})),
  transition('* => void', [
    style({height: '*'}),
    animate(1000, style({height: 0}))
  ])
])

and the visibility variable is a string in the component which changes from "hidden" to "shown" and vice versa when the view details button is clicked.