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, 2022 in JQuery by gaurav
• 23,260 points
588 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.

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


answered Jun 16, 2022 by rajatha
• 7,680 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, 2022 in JQuery by Edureka
• 13,690 points
10,620 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, 2022 in JQuery by Edureka
• 13,690 points
2,459 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, 2022 in JQuery by gaurav
• 23,260 points
718 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, 2022 in JQuery by rajatha
• 7,680 points
824 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,880 points
3,071 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,880 points
18,390 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,880 points
4,463 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,880 points
3,215 views
0 votes
1 answer

difference between $ and $() in jQuery

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

answered Jun 10, 2022 in JQuery by rajatha
• 7,680 points
501 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, 2022 in JQuery by rajatha
• 7,680 points
888 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP