I'm struggling with a few things in my current setup. I have a view that consists of 3 states - intro, loading, and completed. My goal is to create a sliding animation from left to right as the user moves through these states.
Here is the basic structure I have in place:
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.triggered = '';
$scope.loading = false;
$scope.completed = false;
$scope.one = function() {
console.log('one');
$scope.loading = true;
$scope.completed = false;
};
$scope.two = function() {
$scope.loading = false;
$scope.completed = true;
};
}).directive('inheritHeight', ['$window', '$timeout', function($window, $timeout) {
return {
restrict: 'A',
link: function (scope, elm, attrs) {
scope.$watch("loading", function(newV, oldV) {
console.log(newV, elm[0]);
$timeout(function () {
scope.triggered = scope.triggered + 'triggered ';
scope.height = elm[0].querySelector('.child').offsetHeight;
console.log(elm[0].querySelector('.child'));
console.log(elm[0].querySelector('.child').offsetHeight);
elm.css('height', elm[0].querySelector('.child').offsetHeight + 'px');
});
});
}
};
}]);.parent {
border: 1px solid red;
position: relative;
overflow: hidden;
}
.child {
width: 100%;
position: absolute;
top: 0;
left: 0; }
.child.ng-enter, .child.ng-leave {
-webkit-transition: 800ms cubic-bezier(0.645, 0.045, 0.355, 1) all;
-moz-transition: 800ms cubic-bezier(0.645, 0.045, 0.355, 1) all;
-ms-transition: 800ms cubic-bezier(0.645, 0.045, 0.355, 1) all;
-o-transition: 800ms cubic-bezier(0.645, 0.045, 0.355, 1) all;
transition: 800ms cubic-bezier(0.645, 0.045, 0.355, 1) all; }
.child.ng-enter {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%); }
.child.ng-enter.ng-enter-active {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); }
.child.ng-leave {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); }
.child.ng-leave.ng-leave-active {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%); }
.child-a {
background-color: green;
height: 100px;
}
.child-b {
background-color: blue;
height: 50px;
}
.child-c {
background-color: yellow;
height: 30px;
}<script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<div class="parent" inherit-height="">
<div class="child child-a" ng-if="!loading && !completed">
<button ng-click="one()">Click One</button>
</div>
<div class="child child-b" ng-if="loading && !completed">
<button ng-click="two()">Click Two</button>
</div>
<div class="child child-c" ng-if="!loading && completed"></div>
</div>
<p>{{ height }}</p>
<p>{{ triggered }}</p>
</div>Despite having the inherit-height directive on the parent div, it doesn't seem to properly adjust its height when transitioning between states. Even with the use of scope.$watch and $timeout, I can't get it to work smoothly...
Any advice or suggestions would be greatly appreciated. Thank you!