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

时间:2016-11-13 20:09:10

标签: javascript angularjs angularjs-directive

我设置了一个在我的观看次数之间滑动的转换,如下所示:https://plnkr.co/edit/yhhdYuAl9Kpcqw5tDx55?p=preview

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

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

bind

我也在使用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>" }; }); ,但我实际上并不知道这是否是获取动画是否已开始/结束的正确方法。谁能给我一些关于如何实现这一目标的见解?我试着在这里看一下类似的情况:
Animating ui-view without position:absolute
但我找不到关于scope.$on("$locationChangeSuccess"...)的任何文件,我不确定他在这里做了什么。

感谢您的帮助,非常感谢!

1 个答案:

答案 0 :(得分:0)

我能够通过作弊来解决这个问题:

  • element[0].querySelector('#view-box').offsetHeight;没有用,我相信是因为尚未创建的视图。我通过添加$ timeout然后使用element[0].querySelector('.ng-enter').offsetHeight作弊,现在获取进入的视图高度,我可以将其传递给容器中的ng-style。
  • $locationChangeSuccess可以很好地作为位置更改事件,但在动画完成时不会让我知道。这实际上很好,因为我意识到我不需要知道动画何时结束。

如果有人能够在不使用超时的情况下找到更好的方法,我很乐意听到。谢谢!

相关问题