13 thoughts on “animations: initial push for animations

  1. any further idea of how you guys want to implement this? Was interested in getting animations for my modals and looking into how to do it here

  2. Do we really need to reimplement all animations? I mean Bootstrap only adds simple classes and the animations are already part of the css/scss. We just have to adapt the same add/remove class behaviour like Bootstrap JS does.

  3. It’s not about doing it in another or a better way, it’s just about doing it in a way that works with the Angular component lifecycle. Without declaring an animation on a component (using angular’s animations framework), destroying a component removes it from the DOM immediately. ngOnDestroy() would not work as a place to remove a class and have it be animated.

    Using modals as an example, what we could do here – albeit by ignoring the angular animations framework and doing something “custom” – is have the NgbModal service call a method on the modal window component, which would remove the classes, then bind a listener to the transitionend event, at which point the NgbModal service could actually destroy the component.

    @MickL just to be clear – I’m personally 100%% in support of doing this with CSS class manipulation if possible. In addition to requiring less code in the framework, it’s also far more customizable. It’s just not as straight forward to do in angular because of the component lifecycle issue. Unless I’m missing something.

  4. Hey, a short update regarding animations, as things are more clear now.

    We’ve tried a couple of solutions like using Angular animations and using a custom renderer for transitions in the past. Both didn’t work out for various reasons.

    At the moment focus is to introduce simple internal tools for transition handling with transitionend event, customisable in the same way Bootstrap does it.

    That is the next big feature we’re hoping to release in ng-bootstrap.

    The PR at works is #2817, it should move a lot in the coming days.