ng-leave-active在div的绝对定位列表上

马克·弗兰季科维奇

当我从绝对定位的div列表中删除元素时,该动作的ngAnimate动画未按预期执行。下面是一个例子

的HTML

<div ng-app="myApp">
    <div ng-controller='ctrl'>
        <button ng-click='clicked()'>Remove element</button>  
        <div class='myDiv' ng-repeat="item in items" style="left:{{$index*100}}px;top:50px">
            {{item}}
        </div>
    </div>
</div>

的CSS

.myDiv{
    position: absolute;    
    width:100px;
    height:100px;
    background-color:#432344;
    -webkit-transition: opacity .1s linear;
    -moz-transition: opacity .1s linear;
    -o-transition: opacity .1s linear;
    transition: opacity 1s linear;
    opacity: 1;
    border: 5px solid #123123;
}
.myDiv.ng-leave-active {
    opacity: 0;
}

的JavaScript

angular.module('myApp',['ngAnimate'])
  .controller('ctrl', function ($scope){
    $scope.items = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6' ];
    $scope.clicked = function(){
       $scope.items.splice(0,1);       
    }
  });

JSFiddle:链接

基本上发生的是,立即删除了该元素,另一个元素代替了它,并且执行了被删除元素的动画,但该动画不可见,因为另一个元素位于其顶部(换句话说,角度删除元素,重新呈现整个列表,然后执行动画)。这就是为什么只有一个元素时动画效果良好的原因。

我需要首先执行动画,然后重新渲染整个列表。有谁知道如何做到这一点?

煞车

您还需要对left属性应用过渡

所以改变

transition: opacity 1s linear;

transition: all 1s linear;

或者

transition: opacity 1s linear, left 1s linear;

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    使用AWS Cognito和React的仅限Facebook / Google的登录名(无用户名/密码)

  3. 3

    创建Windows Phone 8应用并将其连接到数据库的最佳方法(最好是SQL Server)

  4. 4

    为什么Java中的System.out.println()打印到控制台?

  5. 5

    卷曲函数无法解析来自bash中变量的代理

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    设置与Apache POI Excel表散点图标记图标的颜色

  8. 8

    将Qt Pyside2与asyncio await语法一起使用?

  9. 9

    崇高的文字+蟒蛇的蟒蛇

  10. 10

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  11. 11

    OpenJDK的和AdoptOpenJDK的区别

  12. 12

    大型数据集缓存到Spark内存中时,“超出了GC开销限制”(通过sparklyr和RStudio)

  13. 13

    “执行测试CMAKE_HAVE_LIBC_PTHREAD”失败实际上是什么意思?

  14. 14

    使用Core 2.2中的Identity,如何在关闭浏览器15分钟后保持会话活动?

  15. 15

    React中的ForwardRefExoticComponent和ForwardRefRenderFunction有什么区别?

  16. 16

    猫鼬查找结果,然后将字段替换为findOne

  17. 17

    如何降级Google Colab的Torch版本

  18. 18

    Keras提前停止回调错误,val_loss指标不可用

  19. 19

    如何避免VSCode中的“导入路径不能以.ts扩展名结尾”错误?

  20. 20

    Nuxt.JS:如何在页面中获取路由URL参数

  21. 21

    是否有为什么会AccessibilityManager.sInstance导致内存泄漏的一个原因?

热门标签

归档