How to slide in element like other element drag it out? - html

Question

I use AngularJS.
I need to make next things:
When I click 'Fade in' - the hidden element should appear (slide out) from left side. But it should slide behind 'MAIN BASE' element and it should look like DRAGGER drags it out from left to right. How to implement it? any ideas?
.base {
height: 50px;
width: 300px;
border: 1px solid blue;
}
.faded {
border: 1px solid greenyellow;
width: 200px;
}
.dragger {
height: 50px;
width: 100%;
border: 1px solid green;
}
.fade.ng-enter {
transition: 0.9s linear all;
width: 0;
}
.fade.ng-enter.ng-enter-active {
width: 100%;
}
<div layout="row">
<div class="base">MAIN BASE</div>
<div ng-if="bool" class=" faded fade"> Hidden element </div>
<div class="dragger">DRAGGER</div>
</div>
<button ng-click="bool=true">Fade In!</button>
<button ng-click="bool=false">Fade Out!</button>

Answer 1

Solved. used:
.animation('.slide', ['$animateCss', function($animateCss) {
return {
enter: function(element) {
return $animateCss(element, {
event: 'enter',
structural: true,
from: { 'margin-left': -300},
to: { 'margin-left': 0},
duration: 0.3
});
}
}
}])
<div layout="row">
<div class="base">MAIN BASE</div>
<div ng-if="bool" class=" faded slide"> Hidden element </div>
<div class="dragger">DRAGGER</div>
</div>
<button ng-click="bool=true">Fade In!</button>
<button ng-click="bool=false">Fade Out!</button>