0

当用户单击屏幕上其他位置的按钮时，我有一个元素出现。该元素似乎从屏幕顶部出来。默认情况下，该元素需要隐藏在屏幕上方的视野之外，因此我将有一个基于元素高度的 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();
                }
            }
        },
    }
});
4

1 回答 1

0

正如文档解释的那样：“可以使用 JavaScript 代码使用相同的动画方法（其中使用 jQuery 来执行动画）”。

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

于 2014-05-07T21:39:19.540 回答