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.

[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 https://github.com/angular/angular/issues/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: https://github.com/fareesh/ng2-bootstrap/commit/701af877bcc85f90eb21e6896cbdbfbff922393f

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 https://github.com/angular/angular/issues/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.

[valorkin]

Animation without options to disable it will not be deployed

[huyqut]

Is there any progress on this yet? I'm looking forward to it. 👍

[ersimont]

I've been surprised by the lack of UI libraries available for Angular 2, even now 10 months after its official release! Material 2 is still in beta. Ng-bootstrap is still in alpha (and requires Bootstrap 4 which is in alpha). I've seen PrimeNG and MDBootstrap, but neither of those seem right for my needs. So thank you for working in this space!

Animation support is the last piece my team at work needs to adopt this library and start migrating from AngularJS. I'm looking forward to it!

[valorkin]

To add animation I will have to drop support of ng prior to 4.2.*, when animation builder was introduced There are already @next version, with ng v4 support

[ersimont]

To add animation I will have to drop support of ng prior to 4.2.*, when animation builder was introduced

It makes sense that it could be a breaking change. Or is it possible to disable animations if AnimationBuilder is not available? That could make it an opt-in feature even for people who are using Angular 4.2+. I remember that ui-bootstrap worked that way -- if you didn't include angular-animate it still worked without animations. But maybe that's harder in Typescript/Angular than it was with AngularJS.

There are already @next version, with ng v4 support

I'm sorry I don't quite understand what you mean here.

[valorkin]

Same here, but what if someone wants routing animation, but not collapse element animation, so they should be able to turn it on/off per component. To the end of July I hope to publish animation and close 80% of currently existing issues :)

[dkacuesta]

Hello,

Any news about this? I'm using collapse animation and it is not working.

[valorkin]

Next week we are dropping support of ng v4, and moving to ng v4 So animation will be added soon

[JetpackDuba]

Next week we are dropping support of ng v4, and moving to ng v4 So animation will be added soon

Did you want to say that you are dropping support of ng v2 and not v4?

[valorkin]

Yep

[dkacuesta]

@valorkin Thank you so much :)

[swapsword]

Will be waiting for animations to be added into ngx-bootstrap accordion. However, till then, is there any other way to add animation for ngx-bootstrap accordion? As, we are using ngx-bootstrap in our project and wants to add animation for ngx-bootstrap accordion. Hope you have some solution!

[nguyenbathanh]

Any update on this?

[ghost]

Is there any good walkaround?

[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?