在點擊時調用動畫

我想單擊按鈕後運行動畫。

僞：

<a ng-click="submit()" type="button">Submit</a>

的控制器，有一個方法提交，除其他事情做一個AJAX請求：

$scope.submit = function(){ 
    $http({ method: 'POST', url: '/url' }).success(function(data) { 
     $scope.myData = data.myData; 
     //Animate DOM element 
    }); 
});

現在，這是我的問題所在。我希望能夠在ajax回調上運行動畫。

然而，文件說，這不是一個好主意（DOM操作不應該在控制器來完成。）

那麼，什麼是做這件事的角度呢？

基本上，我怎麼在角

來源

2014-01-25 Secret

它不清楚，你想要什麼。描述你的問題或清除小問題以獲得更好的答案。 –

angular有一個動畫模塊http://docs.angularjs.org/api/ngAnimate –

做Click->Ajax->Animation您應該使用的角度動畫。他們提供ngAnimate服務來輕鬆完成。

簡單地說，您可以使用CSS3轉換爲您的DOM元素設置動畫效果。只需使用ngClass並在收到Ajax響應後切換它。您的DOM元素將自動生成動畫。

.css-class-add, .css-class-remove { 
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
} 

.css-class, 
.css-class-add.css-class-add-active { 
    color: red; 
    font-size:3em; 
} 

.css-class-remove.css-class-remove-active { 
    font-size:1.0em; 
    color:black; 
}

See Angular Animation in action

來源

2014-01-25 08:43:53

在點擊時調用動畫

回答

相關問題