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

Answer 1

正如documentation所解释的那样：＆＃34;使用JavaScript代码可以使用相同的动画方法（jQuery用于执行动画）＆＃34;。

所以你基本上需要使用jQuery中的animate（）来做你想做的事。

AngularJS动画动态边距

1 个答案: