I am currently exploring how to create a CSS3 animation in Angular.js.
Before starting the animation, I need to establish the initial CSS properties using Javascript.
Is there a way to kickstart an animation with Javascript and then smoothly transition it using CSS3?
Here's my scenario:
Upon clicking a div, a dialog should pop up.
The dialog should initially match the size and position of the original div, then expand.
Currently, I can animate the dialog from a set 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 aim to animate the dialog starting at the size of the clicked div. My current (non-functional) code snippet 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';
// WHAT SHOULD I DO HERE?
};
});
// OR MAYBE SOMETHING LIKE THIS?
app.animation('.dialogHolder', function(){
return {
// ADJUST WIDTH, HEIGHT, TOP, LEFT OF .dialog SOMEHOW
};
});
I prefer avoiding jQuery for a lighter page weight.
Best, Hendrik Jan