Question

我有面板：当我按下FadeOut - 它有效 - 元素滑动并隐藏。但是当它需要像使用slideInLeft（）那样显示它不起作用这是html：

<div  >
<div  flex layout="row" layout-align="end end" ng-if="vm.bool" class="fade">
<div>
    <md-button ng-click="vm.hidePanel()" class="md-fab " aria-label="Use Android">
        <md-icon md-font-icon="zmdi zmdi-close"></md-icon>
    </md-button>
</div>
</div>
<div layout="row" layout-fill flex  ng-init="vm.onInit();hideFoders=false; " >
<div  class="folderListPanel padding-top-60" flex layout="column" layout-align="start center" >
    <div>There are {{vm.foldersToJoin}} folder's to join</div>
    <div class="padding-top-10 padding-bottom-30">
        <md-input-container>
            <label></label>
        <input ng-model="search.name" placeholder="Filter">
            </md-input-container>
    </div>
    <div >
        Fade me in out
    </div>
    <button ng-click="vm.bool=true">Fade In!</button>
    <button ng-click="vm.bool=false">Fade Out!</button>
    <md-whiteframe class="md-whiteframe-8dp foldersInList capitalize" layout  ng-repeat="folder in vm.folderList | filter:search" ng-click="vm.toggleLeft()">
        <span class="padding-left-10">{{folder.name = vm.getIterationName(folder.metadata)}}</span>
    </md-whiteframe>
</div>

和css：

.fade{
 &.ng-enter {
position: absolute;
width: 100%;
height: 100%;
transition: .5s;
}
&.ng-leave

&.ng-enter {
@include slideInLeft();
}

&.ng-leave {
@include slideOutLeft();
}
}

最终的结果是从左侧显示元素幻灯片。并滑动到左侧隐藏

为什么slideInLeft不起作用？

0 个答案: