div上的fadeIn和滑动链接

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 的原因是，在更改display 属性时不能运行transition (settings = true;)