淡入淡出并在div上滑动链接

Question

我试图在单击按钮时显示<div>调用的设置。它应该淡入，然后向右滑动。它淡入屏幕的左侧。

我到目前为止有：

的HTML

<div id="settings" ng-show="settings"> 

</div> 

，并调用showSettings() function链接：

<a href="#" ng-click="showSettings()"><i class="icon setting"></i></a> 

的CSS

#settings { 
    background:red; 
    position:fixed; 
    top:0; 
    left:0; 
    bottom:0; 
    width:400px; 
} 

的控制器

$scope.showSettings = function(){ 
    $timeout(function() { 
     $scope.settings = true; 
    }, 250);  
} 

所以我有衰落，但我现在该如何能让它向右滑动说200px？

此外，我希望能够点击除<div>之外的任何地方来反转此过程。

Answer 1

是这样的：

添加ng-class="{slide:slideFlag}"

在控制器

$scope.showSettings = function() { 
$timeout(function() { 
    $scope.settings = true; 
    $timeout(function() { 
    $scope.slideFlag = true; 
    }, 250); 

}, 250); 

和CSS：

.slide{ 
    transition: all 0.5s; 
    margin-left:200px; 
} 

这里是工作提琴： http://jsfiddle.net/q5cqh9qj/

还，使用两个timeouts是，你不能运行transition，而你正在改变display财产的理由（设置=真;）