Question

我有一个简单的例子，尝试通过设置其left属性来移动div。当我刷新页面时，div会立即显示650左侧。没有转换发生。我尝试过对代码进行各种更改，但结果总是如此。以下是目前的状态。我错过了什么？

HTML：

<div ng-style="pos" class="box"></div>

CSS：

.box {
    position:absolute;
    top:250px;
    left:100px;
    background-color:tan;
    height:50px;
    width:50px;
    transition: top 1800ms linear, left 1800ms linear;
}

JS：

function moveController($scope) {
    $scope.pos = {
        top: 250,
        left: 100
    }
    $scope.pos.left = 650;
}

正如你所看到的，我希望盒子移动1800毫秒。该框显示在屏幕上，具有基于CSS的正确格式，因此该部分正在工作。但是，没有过渡。为什么呢？

Answer 1

您应该在更改样式之前添加超时或延迟：

function moveController($scope, $timeout) {
    $scope.pos = {
        top: 250,
        left: 100
    }

    $timeout(function(){
         $scope.pos.left = 650;
    }, 1000)

}

由于DOM在控制器初始化后>呈现，因此如果没有添加延迟，DIV的初始位置将为top: 250, left: 650。

Answer 2

问题是你要同时分配这两个值。

$timeout(function () {
   $scope.pos.left = 650;
}, 10);

通过这种方式，您可以设置初始值并稍后进行更改！

Answer 3

您可以在控制器中使用angular.element(document).ready()，以便在dom准备就绪时运行操作。

因此，在您的控制器中，您可以使用：

angular.element(document).ready(function(){
    //action onload here
});

过渡段不起作用

3 个答案: