javascript - 如何使用 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

您想使用 ng-animate http://docs.angularjs.org/api/ngAnimate

如果您正在使用 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"/>