时间戳

首页 > 解决方案 > AngularJS 中的动画

jquery - AngularJS 中的动画

问题描述

我有一个动画，它改变了一个元素的左边距，使一些元素“出现”而其他元素“消失”。我在 JQuery 中有该代码，但我需要在 AngularJS 1.6 中实现它。我在需要时对左边距进行了更改，但我希望它像这样动画：

("#container").animate({ marginLeft: nextMargin+'px' }, 1000);

我正在尝试使用 ng 风格的东西，但无法正常工作：

HTML

<div class="container-main-father" id="container" ng-style="customStyle ">

角

 var Container = angular.element(document.querySelector('#container'));
        var totalWidth = Container.prop('offsetWidth');        
        var oldMargin = Container.css('margin-left'); 
        $scope.customStyle = {
            'from { margin-left': oldMargin  + '; }',
            'to { margin-left': (-totalWidth / 3 * (index - 1)) + '}'
        };

另外，我在运行时这样做是因为宽度会发生变化并且不能在 css 中完成。

更新

这是实际的工作代码：

var Container = angular.element(document.querySelector('#container'));
            var totalWidth = Container.prop('offsetWidth');        
            var oldMargin = Container.css('margin-left'); 
            $scope.customStyle = {
                'margin-left': (-totalWidth / 3 * (index - 1)) 
            };

标签： jqueryangularjsng-animate

解决方案

推荐阅读