如何像其他元素一样在元素中滑动拖出来？

Question

我使用AngularJS。

我需要做下一件事：

当我点击“淡入”时 - 隐藏的元素应该从左侧出现（滑出）。但它应该在'MAIN BASE'元素后面滑动，看起来应该像DRAGGER从左到右拖出它。怎么实现呢？任何想法？

.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>