他の要素のように要素をスライドさせるにはどうすればいいですか？

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>