valor-software
feat(animations): add animations to all components
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.
Yes, could someone please advise the timeline for releasing the transition module?
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
ok, with angular2 2.1 animations became a thing, so they will be added soon
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.
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
@valorkin да это какой-то беспредел вообще. юзаю ангуляр 2 юниверсал, там мне админ говорит мол используй версию ng2-bootstrap 1.1.16. Потому что jQuery там (в юниверсале) работает через задницу, он работает, но в компонентах другие плагины типа owl.carousel2 отрубаются.
думал хоть это заработает. заработало. перелопатил css этот, зачем вообще использовать display, когда при разных значениях никакая анимация не работает. отрубаешь дисплей, меняешь на height: 0 (auto) и т.д. и все работает. Уже третьи сутки сижу потею как черт))
И то, если css правишь, то работает только opacity.
@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
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);
}
Biggest issue with animation at the moment, that directives doesn't support animation :(
@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
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.
in angular v4.2 added AnimationBuilder
so... ;)
in nearest time I will be adding animation to all existing components
@valorkin now that you're adding animations to all components it would be really useful to be able to disable or enable programmatically.
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!
