如何像其他元素一样滑入元素将其拖出？

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>

Answer 1

解决。使用：

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