I'm working on implementing a sliding side-bar feature, but I've run into an issue where the main view snaps into place while the side bar slides in. To better illustrate this problem, I've set up a demonstration on Plunkr. The body doesn't move along with the side-panel as expected. How can I resolve this issue?
body:
<div class="container">
<div class="child">
<a href ui-sref="main.sidePanel">show side panel</a>
</div>
<div ui-view class="slide"></div>
</div>
side-panel:
<div class="side-panel-body">
<a href ui-sref="main">hide side panel</a>
</div>
css:
.container {
display: flex;
height: 400px;
padding: 20px 0;
}
.child {
background: yellow;
flex: auto;
}
.side-panel-body {
width: 400px;
height: 100px;
background: lightgray;
}
.slide.ng-enter,
.slide.ng-leave {
transition: all 2s ease;
}
.slide.ng-enter {
transform: translate(100%, 0);
}
.slide.ng-enter-active {
transform: translate(0, 0);
}
.slide.ng-leave {
transform: translate(0, 0);
}
.slide.ng-leave-active {
transform: translate(100%, 0);
}