feat(animations): add animations to all components

[masiamj]

Blocked by: angular/angular#9947

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

[jurienhamaker]

+1

[qjnz]

Yes, could someone please advise the timeline for releasing the transition module?

[qjnz]

Hi guys, from this file \ng2-bootstrap\components\collapse\collapse.directive.ts, you guys have implemented the animation transition but commented them all out because of the following ng issue.

however, the issue 5984 has been closed in June 2016, can you guys advise when the animation will be enabled for ng2-bootstrap please?

// fix: replace with // '@angular/animate';
// when angular/angular#5984 will be fixed

[raghavan85]

+1 Animations are quintessential for something like Accordion.

[wolfgangmeyers]

Any updates on this?

[valorkin]

ok, with angular2 2.1 animations became a thing, so they will be added soon

[fareesh]

I needed accordion animations for a project so I made some very specific tweaks that work for my use-case. If anyone is interested you can check out: fareesh@701af87

Would also be happy to make the necessary changes to make this usable in a generic case if someone can point me in the right direction.

[Scipionh]

Hope the animations are coming soon, it's definitely a must.

[zmnv]

Any solutions??

[valorkin]

I can add almost all animations, but I will have to drop IE9 support
because they simply doesn't work there
plus at the moment it is hard to configure them

[zmnv]

@valorkin да это какой-то беспредел вообще. юзаю ангуляр 2 юниверсал, там мне админ говорит мол используй версию ng2-bootstrap 1.1.16. Потому что jQuery там (в юниверсале) работает через задницу, он работает, но в компонентах другие плагины типа owl.carousel2 отрубаются.

думал хоть это заработает. заработало. перелопатил css этот, зачем вообще использовать display, когда при разных значениях никакая анимация не работает. отрубаешь дисплей, меняешь на height: 0 (auto) и т.д. и все работает. Уже третьи сутки сижу потею как черт))

И то, если css правишь, то работает только opacity.

[k20human]

Hi,

Any news / solution on this issue ?

[valorkin]

@k20human seems in ng v4+ animations will come as needed ;)

[zmnv]

@k20human just edit css files. The problem in 'display: block'. Delete it or replace to another style, besauce 'transitions' doesnt work with display: block in that case.

It helps for me. But after that i tryed SWIPER and its awesome

[k20human]

Finally i use animate.css and use collapsed and expanded method in my component to add or remove class (for now)

public collapsed(event:any):void {
        this.render.setElementClass(event._el.nativeElement, 'slideInDown', false);
        this.render.setElementClass(event._el.nativeElement, 'slideOutDown', true);
    }

    public expanded(event:any):void {
        this.render.setElementClass(event._el.nativeElement, 'slideOutDown', false);
        this.render.setElementClass(event._el.nativeElement, 'slideInDown', true);
    }

[valorkin]

Biggest issue with animation at the moment, that directives doesn't support animation :(

[valorkin]

It's kinda blocker

[JetpackDuba]

Has improved this situation with angular 4?

[judsonmusic]

+1

[kaweski]

+1

[valorkin]

4.1 promises to bring required features, but we will see

[JetpackDuba]

Angular 4.1 is out! Does it bring the required features @valorkin ?

[valorkin]

@aeab13 issue to track angular progress angular/angular#9947
I am actually a bit tired of waiting, so most probably I will provide some workaround

[michelebombardi]

News about this? I'm using Collpase directive on navbar menu (on small screens) but the animation does not work

@k20human I've tried your solution but it animates only the link, the background still appears instantly.

[xjben]

any updates?

[valorkin]

in angular v4.2 added AnimationBuilder
so... ;)
in nearest time I will be adding animation to all existing components

[danielGz]

@valorkin now that you're adding animations to all components it would be really useful to be able to disable or enable programmatically.

[MetaiR]

this is 2018 and angular version is 5.2.
isn't there any update on this??

[valorkin]

@MetaiR https://github.com/valor-software/ngx-bootstrap/pulse/monthly

[valorkin]

we are working to get it soon

[MetaiR]

thanks so much

[skhye05]

Thank you so much

[fmoutawe]

Great news !
Thanks you for your work on this package !

[adrianbarbe]

That's one of the reason why I have chosen VueJs 2 over Angular. I like Angular but the conservatism and the lack of things like these (animations in UI-packages etc) makes me sad.

[DemianFuentes]

There are news about it?
I'm looking for a way to add animations to alerts, someone know if there are a way to do this?
thanks!

[halaz-lazlo]

@DemianFuentes couldn't you do it with css animation?

[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 🤦🏻