在动画开始时改变元素高度(Angular)

Change element height on animation start (Angular)

本文关键字：Angular 高度 元素 动画 开始时 改变      更新时间：2023-09-26

我已经设置了一个在视图之间滑动的过渡，如下所示:https://plnkr.co/edit/yhhdYuAl9Kpcqw5tDx55?p=preview

我需要将视图位置设置为绝对，以便使两个"面板"一起滑动，但我的问题是，由于绝对定位，我的视图容器默认高度为0。我想做的是在动画开始时立即获得视图的高度，并改变外部容器的高度以匹配它，但我遇到了几个问题-我不知道如何实际获得该元素的高度，我不确定如何在动画开始时做到这一点。

到目前为止，我已经尝试复制其他人的工作，并创建了一个带有链接函数的指令，该函数将元素传递给它，但我的"querySelector"方法只返回null。

myApp.directive('viewContainer', function() {
    return {
        restrict: 'A',
        scope: {
          containerHeight: "="
        },
        link: function(scope, element) {
            scope.$on("$locationChangeSuccess", function() {
                //scope.height = element[0].querySelector('#view-box').offsetHeight;
                //scope.containerHeight.height = scope.height;
            });
        },
        template: "<div id='view-box' ng-view></div>"
    };
});

我也使用scope.$on("$locationChangeSuccess"...)，但我实际上不知道这是否是正确的方式来获得动画是否已经开始/结束。谁能给我一些见解，我如何才能做到这一点?我试着在这里看看类似的情况:
没有位置的ui-view动画:absolute
但我找不到任何关于$stateChangeSuccess的文件，我也不确定他在这里做什么。

谢谢你的帮助，非常感谢!

我可以通过一点点作弊来弄清楚这一点:

  • element[0].querySelector('#view-box').offsetHeight;不工作，我相信是因为视图尚未创建。我通过添加$timeout欺骗，然后使用element[0].querySelector('.ng-enter').offsetHeight，现在得到进入视图高度，我可以传递到我的容器中的ng样式。
  • $locationChangeSuccess作为位置更改事件可以正常工作，但不让我知道动画何时完成。这其实很好，因为我意识到我不需要知道动画何时完成。

如果有人能想出一个更好的方法来做这件事而不使用超时，我很乐意听到。谢谢!

相关文章：