Angular ngAnimate导致宽度动画跳跃

 dengdaidanlan_738_260 发布于 2023-02-07 18:43

我在ngAnimate几个案例中使用Angular .在另一个,我有一个指令,正在改变列的宽度(使用Bootstrap col-md-*类)和一个如下所示的简单转换:

.column-view .column {
  transition: width 1s;
}

我没有明确地ngAnimate在这里使用,但它确实让我感到悲伤只是为了被包括在内.基本上,转换在转换到新宽度之前会跳转到零.如果我ngAnimate从我的模块中删除,过渡是顺利的,但我需要ngAnimate我的应用程序中的其他功能.

我可以禁用正常的ngAnimateCSS转换吗?我可以在这做什么来解决这个问题?快把我逼疯了.

这是一个证明问题的小提琴.有关复制的说明,请参阅注释.

1 个回答
  • 注意:我使用当前的最新版本(AngularJS 1.2.6)来调查您的问题.

    我发现在内部调用了一个"blockTransitions"函数,它就是这样:它阻止转换.

    https://github.com/angular/angular.js/blob/master/src/ngAnimate/animate.js#L1099

    如果您注释上面链接的行("blockTransitions"函数体的单行),问题就解决了.

    由于我不知道这是否是一个正确的解决方案(可能不是),我刚刚创建了一个PR,以便他们可以正确解决问题:

    https://github.com/angular/angular.js/pull/5552


    也使用最新版本,有一个解决方法:http://jsfiddle.net/2fnhr/3/

    app.config(function($animateProvider){
      $animateProvider.classNameFilter(/^((?!col-md).)*$/);
    });
    

    这将仅对其名称中不包含"col-md"的类应用ngAnimate内容,从而关闭相关Bootstrap类的ngAnimate.

    这里正则表达式的说明:https://stackoverflow.com/a/406408/370290

    2023-02-07 18:45 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有