Как инициализировать анимацию Angularjs css3 с помощью Javascript

Question

В настоящее время я пытаюсь сделать анимацию CSS3 в Angular.js.
Перед анимацией я пытаюсь установить исходные свойства css с помощью Javascript.
Итак, есть ли способ инициализировать анимацию с помощью 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; 
} 

Я хотел бы, чтобы оживить диалог, начиная с размера щелкнули дел. Пока мой код (пока не работает) выглядит следующим образом:

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

Вы хотите использовать нг-анимацию http://docs.angularjs.org/api/ngAnimate

Если вы используете нг-повтор, вы можете анимировать, когда элементы въезжать, выезжать и передвигаться по ретранслятору. Магия в том, что вам даже не нужно указывать дополнительную директиву в вашем 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"/>