feat(animations): add animations to all components

[masiamj]

Blocked by: https://github.com/angular/angular/issues/9947

Are animations for the accordion, alerts, etc. on the roadmap for this project? Would be huge to further reflect fully-featured Bootstrap components.

[DemianFuentes]

I couldn't do it by css animations. When the alert is dismissed, it disappears from the page instantly. I want to fade it out instead. On March @valorkin said that they were working on that. I'm not sure what happend, if I have to update the plugin or not, I checked the commits messages but they didn't say nothing about it.

[valorkin]

A lot of things happened, good and bad, and I stuck a bit with this. One of the most consuming things is organizing https://ngtalks.io This week we need to release new version of ngxbs for angular 6

[robvaneck]

Hi! Any update on this? :)

[heitorb]

Hi. Any update on this? After some core bootstrap features like grids, in my option this appears to be the most important feature. I much rather use Bootstrap than Angular Materials, but all their components are animated.

[codeepic]

I wanted to use the ngx-accordion, but the lack of animations is a big show stopper for our product. The opening and closing without some transition to guide the user is jarring. @valorkin Can you explain what is the blocker for adding the animations?
It's been 2 years since this issue was opened.

[zahasoftware]

Another alternative https://material.angular.io/components/expansion/overview

[gkamperis]

If the CSS is designed correctly you can have animations via CSS.

The accordion on expand adds styles via code to the element which cannot be overridden unless you use !important. Once down that path it becomes a mess.

Just provide a class and add them there and add the class.

Also when collapsing remove the properties you added on expansion. I worked around the issues only to find that on collapsing the properties are left in the element and everything just falls apart.

I know it is efficient but display: none kills all animations. Don't use it to hide the elements unless maybe the user does not want animations.

You don't need directives if you design the css properly.

Provide hooks to allow customisation.

[shainanigans]

Hi, any update on this? If it's at least possible to hook in to something like "beforeShown" and "beforeHidden" that would be helpful (using the dropdown as an example)!

[barat]

Faced same thing - is it planned, or just abandoned? At least is there any hack?

[coffeymatt]

I've taken to using a mix of ngx-bootstrap and angular material depending on which meets my needs. The animations are very good on angular material, e.g. the accordion:

https://material.angular.io/components/expansion/overview

[chrised123]

There is a small hack I worked on. you have to create a CSS animation with the time you're gonna setup dismissible timeout.

eg -

0% {
    opacity: 0;
  }

  10%{
    opacity: 1;
  }

  90%{
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

[pacman21]

I have a hack that we used to have a sliding animation.

To have the accordion animate, just add the animate class to the accordion. We are using this with an older version, ngx-boostrap 3.0.1, but it might work for your use-case. You may need to alter the max-height or transition speed based on your needs.

 /*CSS Animation hack for bootstrap accordions */
accordion.animate .panel-collapse {
    max-height: 0px;
    transition: max-height 0.5s;
    display: block !important;
    overflow: hidden !important;
}

accordion.animate accordion-group.panel-open .panel-collapse {
    max-height: 1024px;
}
/**End Accordion*/

[on3dd]

Still no solution for this? Can't even animate show/hide events of tooltip 🤦🏻