jQuery slideUp and slideDown equivalent in Angular2

0 votes

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.

Jun 15 in JQuery by gaurav
• 12,980 points
10 views

1 answer to this question.

0 votes

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.


answered Jun 16 by rajatha
• 4,060 points

Related Questions In JQuery

0 votes
1 answer

addClass and removeClass in jQuery - not removing class

What happens is that your close button ...READ MORE

answered Jun 2 in JQuery by Edureka
• 13,640 points
26 views
0 votes
1 answer

get_template_directory_uri() in Jquery and CSS

JS files aren't parsed by PHP, so ...READ MORE

answered Jun 2 in JQuery by Edureka
• 13,640 points
33 views
0 votes
1 answer

Difference between :hidden and :not(:visible) in jQuery

During animations that hide an element, the ...READ MORE

answered Jun 14 in JQuery by gaurav
• 12,980 points
12 views
0 votes
1 answer

How to shorten repeating code with html function and return tags in jquery

Firstly note that replace() only accepts two arguments, the ...READ MORE

answered Jun 15 in JQuery by rajatha
• 4,060 points
9 views
0 votes
1 answer

What are the vulnerability related to PHP Form?

Hii, The $_SERVER["PHP_SELF"] variable can be used by ...READ MORE

answered Feb 13, 2020 in PHP by Niroj
• 82,720 points
1,137 views
+1 vote
1 answer

How can we send message multiple time to a specific person or group in whatsapp using loop?

Hii @kartik,  This is simple task to send single ...READ MORE

answered Feb 28, 2020 in Java-Script by Niroj
• 82,720 points
5,487 views
0 votes
1 answer

Why it is necessary to refresh CSRF token per form request?

Hello, Generating a new CSRF token for each ...READ MORE

answered Mar 19, 2020 in Laravel by Niroj
• 82,720 points
2,748 views
0 votes
1 answer

What is meant by passing the variable by value and reference in PHP?

Hello, When the variable is passed as value ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,720 points
1,380 views
0 votes
1 answer

difference between $ and $() in jQuery

JavaScript: It is a major scripting programming language ...READ MORE

answered Jun 10 in JQuery by rajatha
• 4,060 points
10 views
0 votes
1 answer

How to add and remove classes in Javascript without jQuery

To add or remove a class on ...READ MORE

answered Jun 14 in JQuery by rajatha
• 4,060 points
6 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP