Check out the transition I've set up to smoothly slide between my views: https://plnkr.co/edit/yhhdYuAl9Kpcqw5tDx55?p=preview
To ensure that both 'panels' slide together, I need to position the view absolutely. However, this causes the view container's height to default to 0. My goal is to determine the view's height at the start of the animation and adjust the outer container's height accordingly. The challenge lies in identifying the element's height and executing this adjustment when the animation begins.
I attempted to replicate others by creating a directive with a link function that receives the element as an input. Unfortunately, using "querySelector" resulted in a null return value.
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>"
};
});
I'm currently relying on
scope.$on("$locationChangeSuccess"...)Animating ui-view without position:absolute
However, references to
$stateChangeSuccess were unclear, leaving me unsure of the approach used.
Your assistance would be greatly appreciated. Thank you!