Ngx-bootstrap: 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

[aeab13]

Has improved this situation with angular 4?

[judsonmusic]

+1

[isakaweski]

+1

[valorkin]

4.1 promises to bring required features, but we will see

[aeab13]

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

[mounthorse-slns]

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.

[iamjben]

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

[aeab13]

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?

[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

[borriej]

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.

[juandrn]

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*/