I have been working on creating a flyout panel mechanism similar to the one used in Microsoft Azure's online portal. The portal has a flyout panel for menus that slide out from left to right when opening a new submenu, with the panel container aligned to the left of the page.
While this setup works well for me, I need my panels to appear on the right side of the screen. I have found a solution, but the issue arises when adding a new flyout panel - it abruptly repositions its neighbor and slides out using the show() function.
Essentially, I want the new panel to smoothly ease out its neighbor as it slides into view. I hope this explanation makes sense.
HTML:
<div id="flyoutcontainer" class="parentflyout">
<div class="childflyout" style="display:block;">
<button onclick="openNewFlyout('#flyoutcontainer')">OpenNew</button>
<button onclick="closePanel('#flyoutcontainer')">Close</button>
</div>
</div>
CSS
/*Temp*/
body, html{height: 100%;}
.parentflyout{
height:100%;
}
.childflyout:first-of-type{
width:200px;
}
.childflyout:nth-of-type(2){
overflow:hidden;
}
.childflyout{
border:1px solid black;
width: 340px;
float:right;
height:100%;
display: none;
}
JQuery
function openNewFlyout(containerid){
var newFlyout = $('<div class="childflyout"></div>');
var appended = $(containerid).prepend(newFlyout);
newFlyout.show('slide', {direction: 'right'}, 800);
}
function closePanel(containerid){
$(containerid + ' .childflyout:first-of-type').remove();
}
EDIT:
To clarify further, the red box demonstrates the current "animation" effect, while I am aiming for the smoother transition illustrated in the green box.