Angular 2 Slide Up and Down Animation

Question

I recently built the following Angular 2 Read More component. What this component does is collapse and expand long blocks of text with \"Read more\" and \"Read Less\" links.

Answer 1

Automatic property calculation

Animation with automated height calculation

Sometimes you don't know the value of a dimensional style property until runtime. For example, elements often have widths and heights that depend on their content and the screen size. These properties are often tricky to animate with CSS.

In these cases, you can use a special * property value so that the value of the property is computed at runtime and then plugged into the animation.

In this example, the leave animation takes whatever height the element has before it leaves and animates from that height to zero :

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

from Angular official documentation (now as an archive) : https://v2.angular.io/docs/ts/latest/guide/animations.html#!#automatic-property-calculation