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

【问题标题】：How to slide in element like other element drag it out?如何像其他元素一样滑入元素将其拖出？
【发布时间】：2016-12-05 22:07:50
【问题描述】：

我使用 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>

【问题讨论】：

标签： html css angularjs angular-material

【解决方案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>

【讨论】：