0

Is it possible to animate elements on Angular 2 like on jQuery? For example, I want div containing sub-elements to expand/shrink when clicked. Does Angular 2 provide directives for this, or do I have to call jQuery inside Angular event handlers ?

br.julien
  • 3,420
  • 2
  • 23
  • 44
Tuomas Toivonen
  • 21,690
  • 47
  • 129
  • 225
  • Just toggle a class and animate via CSS. – jeffjenx Jun 03 '16 at 13:44
  • This sounds more easy than it is. Seems like CSS only allows to animate height with absolute value. I tried something like @keyframes expand { from {height: 0px;} to {height: auto;}} but it didn't work. I'm using Bootstrap btw. – Tuomas Toivonen Jun 03 '16 at 15:42
  • For variable height elements, many people have been animating the `max-height` property. The only reason I'm recommending it is because it doesn't litter your angular code with jQuery logic and it doesn't mix your presentation logic with your interaction logic. – jeffjenx Jun 03 '16 at 15:47
  • I found an easier solution, just use data-toggle="collapse" element attribute of bootstrap library. I have no idea how it does it's magic, but it's easy solution to make dropdown panels – Tuomas Toivonen Jun 04 '16 at 12:13

2 Answers2

1

Check out https://angular.io/docs/ts/latest/guide/animations.html

Remember to use the polyfills for older browsers.

dotnet-provoke
  • 1,308
  • 14
  • 25
0

Just use bootstrap accordion . Here is a link to it https://getbootstrap.com/docs/4.3/components/collapse/

Sayantan Mukherjee
  • 168
  • 5