淡入淡出並在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財產的理由（設置=真;）