jQuery .slideUp() and .slideDown() equivalent in Angular2

user_5835423 0
Viewed 3642

Can you please guide me on how to create a custom animation in Angular2 equivalent to jQuery .slideUp() and .slideDown(). I know I can use jQuery plugin for this, but many folks recommend not to use it. So I'm looking for an alternate method to create these animations. The slideUp and slideDown will make any div collapsible with smooth animation on click of some button.

angular animation javascript
4 Answers

Below is the animation for slide down and up using dynamic height values.

If there is no margin and/or padding on the object, you can remove those settings.

animations: [
  trigger('slideUpDown', [
    transition('void => *', [
      style({height: 0, margin: 0, padding: 0, opacity: 0}),
      animate(500, style({height: '*', margin: '*', padding: '*', opacity: 1}))
    ]),
    transition('* => void', [
      style({height: '*', margin: '*', padding: '*', opacity: 1}),
      animate(500, style({height: 0, margin: 0, padding: 0, opacity: 0}))
    ])
  ])
]
user_32902660
Related