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 に答える