weixin_39665787
2021-01-12 16:31 阅读 0

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.

该提问来源于开源项目:valor-software/ngx-bootstrap

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

62条回答 默认 最新

  • weixin_39623350 weixin_39623350 2021-01-12 16:31

    +1

    点赞 评论 复制链接分享
  • weixin_39956353 weixin_39956353 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39956353 weixin_39956353 2021-01-12 16:31

    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 // '/animate'; // when https://github.com/angular/angular/issues/5984 will be fixed

    点赞 评论 复制链接分享
  • weixin_39530839 weixin_39530839 2021-01-12 16:31

    +1 Animations are quintessential for something like Accordion.

    点赞 评论 复制链接分享
  • weixin_39901685 weixin_39901685 2021-01-12 16:31

    Any updates on this?

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39815345 weixin_39815345 2021-01-12 16:31

    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.

    点赞 评论 复制链接分享
  • weixin_39914975 weixin_39914975 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39842682 weixin_39842682 2021-01-12 16:31

    Any solutions??

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

    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

    点赞 评论 复制链接分享
  • weixin_39842682 weixin_39842682 2021-01-12 16:31

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

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

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

    点赞 评论 复制链接分享
  • weixin_39889487 weixin_39889487 2021-01-12 16:31

    Hi,

    Any news / solution on this issue ?

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39842682 weixin_39842682 2021-01-12 16:31

    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

    点赞 评论 复制链接分享
  • weixin_39889487 weixin_39889487 2021-01-12 16:31

    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);
        }
    
    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

    It's kinda blocker

    点赞 评论 复制链接分享
  • weixin_39765325 weixin_39765325 2021-01-12 16:31

    Has improved this situation with angular 4?

    点赞 评论 复制链接分享
  • weixin_39641738 weixin_39641738 2021-01-12 16:31

    +1

    点赞 评论 复制链接分享
  • weixin_39963096 weixin_39963096 2021-01-12 16:31

    +1

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

    4.1 promises to bring required features, but we will see

    点赞 评论 复制链接分享
  • weixin_39765325 weixin_39765325 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

    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

    点赞 评论 复制链接分享
  • weixin_39928102 weixin_39928102 2021-01-12 16:31

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

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

    点赞 评论 复制链接分享
  • weixin_39970369 weixin_39970369 2021-01-12 16:31

    any updates?

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39864571 weixin_39864571 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

    Animation without options to disable it will not be deployed

    点赞 评论 复制链接分享
  • weixin_39562234 weixin_39562234 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39970994 weixin_39970994 2021-01-12 16:31

    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!

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39970994 weixin_39970994 2021-01-12 16:31

    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 version, with ng v4 support

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

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

    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 :)

    点赞 评论 复制链接分享
  • weixin_39940344 weixin_39940344 2021-01-12 16:31

    Hello,

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

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39765325 weixin_39765325 2021-01-12 16:31

    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?

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

    Yep

    点赞 评论 复制链接分享
  • weixin_39940344 weixin_39940344 2021-01-12 16:31

    Thank you so much :)

    点赞 评论 复制链接分享
  • weixin_39931101 weixin_39931101 2021-01-12 16:31

    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!

    点赞 评论 复制链接分享
  • weixin_39598941 weixin_39598941 2021-01-12 16:31

    Any update on this?

    点赞 评论 复制链接分享
  • weixin_39789979 weixin_39789979 2021-01-12 16:31

    Is there any good walkaround?

    点赞 评论 复制链接分享
  • weixin_39611008 weixin_39611008 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

    we are working to get it soon

    点赞 评论 复制链接分享
  • weixin_39611008 weixin_39611008 2021-01-12 16:31

    thanks so much

    点赞 评论 复制链接分享
  • weixin_39719101 weixin_39719101 2021-01-12 16:31

    Thank you so much

    点赞 评论 复制链接分享
  • weixin_39526415 weixin_39526415 2021-01-12 16:31

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

    点赞 评论 复制链接分享
  • weixin_39822629 weixin_39822629 2021-01-12 16:31

    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.

    点赞 评论 复制链接分享
  • weixin_39617473 weixin_39617473 2021-01-12 16:31

    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!

    点赞 评论 复制链接分享
  • weixin_39765796 weixin_39765796 2021-01-12 16:31

    couldn't you do it with css animation?

    点赞 评论 复制链接分享
  • weixin_39617473 weixin_39617473 2021-01-12 16:31

    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 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.

    点赞 评论 复制链接分享
  • weixin_39720510 eternal? 2021-01-12 16:31

    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

    点赞 评论 复制链接分享
  • weixin_39623716 weixin_39623716 2021-01-12 16:31

    Hi! Any update on this? :)

    点赞 评论 复制链接分享
  • weixin_39679091 weixin_39679091 2021-01-12 16:31

    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.

    点赞 评论 复制链接分享
  • weixin_39742727 weixin_39742727 2021-01-12 16:31

    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. Can you explain what is the blocker for adding the animations?
    It's been 2 years since this issue was opened.

    点赞 评论 复制链接分享
  • weixin_39757265 weixin_39757265 2021-01-12 16:31

    Another alternative https://material.angular.io/components/expansion/overview

    点赞 评论 复制链接分享
  • weixin_39559369 weixin_39559369 2021-01-12 16:31

    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.

    点赞 评论 复制链接分享
  • weixin_39628160 weixin_39628160 2021-01-12 16:31

    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)!

    点赞 评论 复制链接分享
  • weixin_39943799 weixin_39943799 2021-01-12 16:31

    Faced same thing - is it planned, or just abandoned? At least is there any hack?

    点赞 评论 复制链接分享
  • weixin_39932611 weixin_39932611 2021-01-12 16:31

    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

    点赞 评论 复制链接分享
  • weixin_39598501 weixin_39598501 2021-01-12 16:31

    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;
      }
    
    点赞 评论 复制链接分享
  • weixin_39623716 weixin_39623716 2021-01-12 16:31

    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*/
    
    点赞 评论 复制链接分享

相关推荐