I've got a screen in my application that has a side bar of sorts. The screen presets itself to the user with a full screen grid at first, but when a user clicks on a row/add button (A), the grid collapses (B), and then the user sees the details view.
I'd like to tweak this screen visual change event, to have the grid slide into the sidebar state, as apposed to just appearing instantly.
<div>
<!-- SIDEBAR SECTION -->
<div ng-class="resize()">
<table>
<tr ng-repeat="participant in $data" ng-click="open(participant)" >
<!-- code left out for brevity -->
</table>
</div>
<!-- DETAILS SECTION -->
<div ng-if="state != 0" class="col-lg-9">
<div class="row">
<div some-directive>DETAILS</div>
</div>
<hr />
<!-- left out for brevity -->
</div>
</div>
The resize() function returns either col-lg-12 or col-lg-3, depending on the state of the screen
I've achieved the slide animation by just doing this in my CSS
.col-lg-3-add {
-webkit-transition: 0.8s ease-out all;
transition: 0.8s ease-out all;
}
.col-lg-3-remove {
-webkit-transition: 0.5s ease-out all;
transition: 0.5s ease-out all;
}
All of the above works... except that the details section renders instantly before the transition completes, and then my screen "jumps"... which isn't as smooth as I expected.
My question.
How do I get the details section to transition as well. But only after the sidebar section has completed its transition.
Thing's I've tried that didn't quite work:
- Adding a css class to to details with a larger transition delay.
- Binding the ng-if of details, to another property that gets toggled after a javascript delay of x seconds. (This works sometimes, but sometime not... not sure what the kicker is thats causing the effects to differ. But out of the two options it seems the most "hackey")
What would be the correct angular way to solve this, and I'm drawing blanks on this...