Анимация в AngularJS - PullRequest
Новая
       12

Анимация в AngularJS

0 голосов
/ 10 мая 2018

У меня есть анимация, которая меняет поля слева от элемента, что делает некоторые элементы «появляющимися», а другие «исчезающими». У меня был этот код в JQuery, но мне нужно реализовать его в AngularJS 1.6. Я сделал изменение в левом поле, когда это было необходимо, но мне бы хотелось, чтобы оно было анимировано так: 

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

Я пытаюсь что-то с ng-style, но не могу заставить его работать:

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.

UPDATE

Это фактический рабочий код: 

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)) 
            };
...