每当 $scope 变量更新时,我都试图用一些内容为 div 设置动画。我想向用户反馈已发生更新。
在我的 Controller 中,我通过这样的 websocket 更新 $scope:
socket.syncUpdates('item', $scope.items, function(event, item, array) {
$scope.items = array;
});
我不知道该怎么做。我正在使用 ng-animate 和 animation.css
最佳答案
socket.syncUpdates('item', $scope.items, function(event, item, array) {
$scope.items = array;
$scope.$apply();
});
在您的 syncUpdates 中,使用 $apply()
触发 $digest
周期。
现在您可以在两个地方制作动画。要么在 $scope.$apply()
下方的 syncUpdates
中执行,要么在单独的 $watch
中执行。
$scope.$watch("items", function(newValue, oldValue) {
// your animation code here
}, true);
要为 div 设置动画,这里是一个示例:
myApp.animation(".fade", function () {
return {
addClass: function (element, className) {
TweenMax.to(element, 1, {opacity: 0});
},
removeClass: function (element, className) {
TweenMax.to(element, 1, {opacity: 1});
}
}
})
在你的 Controller 中:
在 Controller 函数中注入(inject) $animate
。然后使用
$animate.addClass(document.querySelector("selector"), "fade");
关于javascript - AngularJS 动画 div 范围更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29576706/