Transition Div不工作

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

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; 
}

正如你所看到的，我想框1800ms的时候动过。该框以基于CSS的正确格式显示在屏幕上，以便该部分正在工作。但是，没有过渡。为什么？

来源

2016-04-27 Bob Horn

什么是调用moveController功能？也许你需要在动画上设置超时或延迟？ – hidanielle

这似乎不会工作，直到页面加载https://jsfiddle.net/dgx4ps35/它只适用于JavaScript设置为onLoad后运行。 onDomready并在头部或身体标签中给出了与您描述的结果相同的结果。 – spaceman

@spaceman就是这样。如果我在加载所有内容后对点击事件做出响应时设置了'$ scope.pos.left'，它就会起作用。如果您想发布答案，我会接受。谢谢。 –

您应更改样式前加一个超时或延迟：

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

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

}

因为DOM控制器初始化之后呈现，所以对于DIV的初始位置将是top: 250, left: 650如果没有延迟添加。

来源

2016-04-27 19:06:25 MarkoCen

问题是您正在同时分配两个值。

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

这样你就可以设置一个初始值和后来改变它！

来源

2016-04-27 19:12:09

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

所以在你的控制器，你可以使用：

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

来源

2016-04-27 19:19:42 Adjit

Transition Div不工作

回答

相关问题