如何使用Javascript初始化Angularjs css3动画

我目前正在尝试用Angular.js制作CSS3动画。
在设置动画之前，我尝试使用Javascript设置初始css属性。
那么，有没有一种方法可以使用Javascript初始化动画，然后使用CSS3继续动画

我的处境：
当用户单击div时，将出现一个对话框。 对话框应该完全从原始div开始（相同大小、相同位置），然后扩展到更大的大小

我能够从预定义的位置和大小设置对话框动画：

CSS:

我想从单击的div大小开始设置对话框的动画。 到目前为止，我的代码（尚未运行）如下所示：

HTML:

我更愿意在没有jQuery的情况下这样做，以保持页面的低权重

问候,，

---

Hendrik Jan

您想使用ng动画吗

如果使用ng repeat，则可以在元素进入、离开和在转发器周围移动时设置动画。神奇的是，您甚至不必在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"/>

---

最后，我找到了以下解决方案：

HTML:
在加载对话框的位置创建onClick处理程序和占位符。

Javascript：
onClick处理程序在动画开始之前设置初始CSS

在动画结束之前，需要删除样式，但在动画开始之后，需要删除样式
动画从onLoad处理程序的末尾开始。如果我们删除onLoad处理程序中的样式（即showDialogLoaded中的样式），那么我们就要提前了。
我们使用setTimeout来确保在动画启动后删除样式。

我希望这能对其他人有所帮助。
问候，

---

HJ

或者，如果您想使用ng include为div设置动画，您可以使用相同的逻辑（但仅适用于进入和离开动画），谢谢Nicolas。这就是我现在使用的。我的问题是，我希望初始状态取决于事件。因此，每次动画开始时，ng enter和ng leave中的CSS都是不同的。也许我在解释我的意图时应该更清楚一点。。

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

.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 { }

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

<!-- 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>

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

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

};

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