I am currently using AngularJS.
My goal is to achieve the following:
When the 'Fade in' button is clicked, a hidden element should slide out from the left side. It should appear behind the 'MAIN BASE' element, giving the illusion that a DRAGGER is dragging it out from left to right. Any suggestions on how to implement this effect?
.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>