如何使用Javascript初始化Angularjs css3動畫

Question

我目前正在嘗試在Angular.js中做CSS3動畫。
動畫之前，我嘗試使用Javascript設置初始CSS屬性。
那麼，有沒有辦法使用Javascript初始化動畫，然後使用CSS3繼續動畫？

我的情況：
當用戶點擊div時，會出現一個對話框。 對話框應該從原始div（相同大小，相同位置）開始，然後增大到更大。

我能夠從預定位置和大小動畫對話框：

CSS：

.dialog { 
    position: absolute; 
    z-index: 10; 
    width:600px; 
    height:400px; 
    margin-left: -300px; 
    left:50%; 
    margin-top: 50px; 
} 
.dialogHolder.ng-enter .dialog { 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s; 
    width:0; 
    height:0; 
    margin-left: 0px; 
} 
.dialogHolder.ng-enter-active .dialog { 
    width:600px; 
    height:400px; 
    margin-left: -300px; 
} 

我想動畫開始在點擊div的大小對話框。 到目前爲止我的代碼（不工作還）是這樣的：

HTML：

<div ng-repeat="course in data.courses" ng-click="showDialog($event)"> 
    {{ course.cursus }} 
</div> 

<!-- Placeholder for blokDialogs --> 
<div class="dialogHolder" ng-include="dialogTemplate.url"> 
    DIALOG WILL BE LOADED HERE 
</div> 

的Javascript：

app.controller('blockController', function($scope) { 

    $scope.showDialog = function(evt) { 
     // get position and size of the course block 
     $scope.dialogTemplate.clientRect = evt.target.getBoundingClientRect(); 

     // load the html to show the dialog 
     $scope.dialogTemplate.url = 'partials/blokDialog.html'; 

     // SHOULD I DO SOMETHING HERE? 
    }; 

}); 

// OR SHOULD I DO SOMETHING LIKE THIS? 
app.animation('.dialogHolder', function(){ 
    return { 
     // SOMEHOW SET THE WIDTH, HEIGHT, TOP, LEFT OF .dialog 
    }; 
}); 

我寧願做沒有jQuery保持頁面權重低。

問候， 亨德里克·揚

Answer 1

最後，我發現了以下解決方案：

HTML：
創建一個onClick處理程序和一個佔位符對話框已加載。

<!-- Element on which the user clicks to initialize the dialog --> 
<div ng-repeat="course in data.courses" 
    ng-click="showDialog($event, course)"> 
{{ course.name }} 
</div> 

<!-- Placeholder for blokDialogs --> 
<div class="dialogHolder" 
    ng-include="dialogTemplate.url" 
    onload="showDialogLoaded()"> 
</div> 

HTML模板：
諧音/ blokDialog.html設置它的風格採用ng-style。

<div ng-style="dialogTemplate.initialStyle"> 
... 
</div> 

的Javascript：
的onclick處理程序中的動畫開始之前設定初始CSS 。

$scope.showDialog = function(evt, course) { 

    // Load the dialog template 
    $scope.dialogTemplate.url = 'partials/blokDialog.html'; 

    // set the css before the animation starts 
    // get position and size of the course block 
    var clientRect = evt.target.getBoundingClientRect(); 
    $scope.dialogTemplate.initialStyle = { 
     left: clientRect.left + 'px', 
     top: clientRect.top + 'px', 
     width: clientRect.width + 'px', 
     height: clientRect.height + 'px', 
     backgroundColor: getComputedStyle(evt.target).backgroundColor 
    }; 

}; 

風格需要刪除動畫結束但之前的動畫開始後。
動畫在onLoad處理程序的末尾處開始。如果我們刪除了onLoad處理程序中的樣式（即在showDialogLoaded中），那麼我們就會提前。
我們使用setTimeout來確保在動畫開始後刪除樣式。

$scope.showDialogLoaded = function() { 
    // remove the style that we set in showDialog 
    setTimeout(function(){ 
     $scope.dialogTemplate.initialStyle = {}; 
     // we need to $apply because this function is executed 
     // outside normal Angular handling, so Angular does not know 
     // that it needs to do a dirty check 
     $scope.$apply(); 
    }, 0); 
}; 

我希望這能成爲別人的幫助。
問候，
HJ

Answer 2

你想用NG-動畫http://docs.angularjs.org/api/ngAnimate

如果您正在使用NG-重複，你可以動畫元素的時候進入，離開，在你的中繼移動。神奇的是，你甚至不必在你的html中添加額外的指令，只需相應地定義你的CSS動畫。

所以你的情況是這樣的

.repeater.ng-enter, .repeater.ng-leave, .repeater.ng-move { 
    -webkit-transition:0.5s linear all; 
    transition:0.5s linear all; 
} 

.repeater.ng-enter { } 
.repeater.ng-enter-active { } 
.repeater.ng-leave { }   
.repeater.ng-leave-active { } 
.repeater.ng-move { }   
.repeater.ng-move-active { } 

和你的HTML

<div ng-repeat="..." class="repeater"/>