jQuery slideUp and slideDown equivalent in Angular2

Question

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.

Answer 1

In order to create a custom slideUp/Down for an element we can do the following:

1) Define two states (open, close) with according styles for height. You could also add other styles like opacity or color.

We use the special value * to tell Angular to use the value during execution. This will include margins and paddings.

2) Add a transition to tell Angular how it should go from one state to the other. This will define how intermediate values (tweens) will be calculated. Syntax follows {{total duration}} [{{delay}}] [{{easing function}}]. Time can be expressed in seconds or milliseconds. Eg: .2s, 200ms. Default easing function when omitted is ease.

To know more about Angular, It's recommended to join Angular Course today.