How to initialize an Angularjs css3 animation using Javascript

Question

I am currently trying to do a CSS3 animation in Angular.js.
Before animating I try to set the initial css properties using Javascript.
So, is there a way to initialize an animation using Javascript and then continue the animation using CSS3?

My situation:
When the user clicks on a div, a dialog should appear. The dialog should start out exactly over the original div (same size, same position), and then grow to a larger size.

I am able to animate the dialog from a predefined position and size:

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

I would like to animate the dialog starting at the size of the clicked div. So far my code (not working yet) looks like this:

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

I'd prefer to do this without jQuery to keep the page weight low.

Regards, Hendrik Jan

Answer 1

In the end, I found the following solution:

HTML:
Create an onClick handler and a placeholder where the dialog is loaded.

<!-- 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 Template:
partials/blokDialog.html sets it's style using ng-style.

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

Javascript:
The onClick handler sets the initial CSS before the animation starts.

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

};

The style needs to be removed before the animation ends but after the animation started.
The animation starts at the end of the onLoad handler. If we remove the style in the onLoad handler (i.e. in showDialogLoaded), then we are to early.
We use setTimeout to make sure that the removal of the style is done after the animation was started.

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

I hope this can be helpful for others.
Regards,
HJ