2

我目前正在尝试在 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 的情况下这样做，以保持页面重量较低。

问候， 亨德里克·扬

4

2 回答 2

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"/>
于 2014-01-27T15:46:25.077 回答
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 模板：
partials/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

于 2014-02-07T08:32:23.183 回答