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（settings = true;）

在div上淡入和滑动链接

1 个答案: