angularjs - AngularJS アニメーションの動的マージン

Question

ユーザーが画面上の他の場所でボタンをクリックすると表示される要素があります。エレメントが画面上部から出てきたように見えます。デフォルトでは、要素は画面の上に隠れている必要があるため、要素の高さに基づく (負の値になる) margin-top スタイルを使用します。要素の高さが異なる場合があるため、これを css にハードコーディングすることはできません。ボタンをクリックすると、要素 margin-top が 0 に変わり、トランジション アニメーションが必要になります。

angularJS のドキュメントに示されているサンプルは、クラスを削除するためのものです。設定する値を知っていて、それらを CSS でコーディングできれば、これは問題なく機能しますが、できません。これを解決する正しい方法は何ですか？

以下のコードは、マージンを使用して要素を表示および非表示にするために機能しますが、アニメーションはありません。マージンが変更されたときに、ここでアニメーションをトリガーするにはどうすればよいですか?

https://docs.angularjs.org/guide/animations

<a href="" ng-click="showTotals=!showTotals">Quote Total: {{salesPriceTotal + taxesTotal - tradeInsTotal | currency}}</a>

<div class="totals" ng-style="setTopMargin()">
    // totals stuff here.
</div>

$scope.setTopMargin = function() {
    return {
        marginTop: $scope.marginTop
    }
};

$scope.$watch('showTotals', function() {
    var margin = $scope.showTotals ? 10 : -160 + $scope.modelTotals.length * -200;
    $scope.marginTop = margin.toString() + 'px';
});

提案された解決策ごとに次のコードを追加しましたが、このコードはヒットしません。

myApp.animation('.totals', function () {
    return {
        move: function (element, done) {
            element.css('opacity', 0);
            jQuery(element).animate({
                opacity: 1
            }, done);

            // optional onDone or onCancel callback
            // function to handle any post-animation
            // cleanup operations
            return function (isCancelled) {
                if (isCancelled) {
                    jQuery(element).stop();
                }
            }
        },
    }
});