Angular ng-animate с использованием javascript не работает должным образом

Я попытался реализовать демонстрационный пример с помощью JS, но что-то пошло не так с ng-switch... Я вижу, что в dom добавляются новые элементы, но ng-switch не удаляет ненужные DIV. можете пожалуйста помочь...

Вот скрипт...

var ngModule = angular.module('myApp', []);
ngModule.animation('js-wave-enter', function () {
return {
    setup: function (element) {
        //prepare the element for animation
        element.css({ 'position': 'absolute', 'left': '100%' });
    },
    start: function (element, done, memo) {
        //start the animation
        element.animate({ 'left': 0  }, function () {
            //call when the animation is complete
            done();
        });
    }
}
});

ngModule.animation('js-wave-leave', function () {
return {
    setup: function (element) {
        //prepare the element for animation
        element.css({'position': 'absolute',  'left': 0     });           
    },
    start: function (element, done, memo) {
        //start the animation
        element.animate({ 'left': '-100%'      }, function () {
            //call when the animation is complete
            done();
        });
    }
}
});

person Bhavesh    schedule 10.04.2013    source источник


Ответы (1)


jQLite не включает метод animate(). Вам нужно правильно включить jQuery, прежде чем включать Angular, и ваш код будет работать нормально. Поэтому просто добавьте следующее перед тегом script, который включает AngularJS:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Обновленный jsFiddle

person Roy Daniels    schedule 10.04.2013
comment
большое спасибо.. есть еще одна проблема, если бы вы могли помочь.. кажется, что element.css('height') не работает, если я удалю jquery... строка 11,12 [fiddle..] (jsfiddle.net/LFFav/14) .. есть идеи, почему ..? - person Bhavesh; 11.04.2013
comment
Если вы проверите DOM, вы увидите 2 вещи: 1) Высота вашего 1-го DIV ng-switch равна 0, а для 2-го — 20 пикселей. И 2) когда анимация CSS запускается на короткое время, отображаются как true, так и false DIV. В JS-аниматоре такого никогда не бывает. Поэтому я считаю, что ошибка заключается где-то в одном (или в обоих) из этих несоответствий. - person Roy Daniels; 11.04.2013
comment
Здесь есть хорошая подробная статья, посвященная всем новым анимациям в версии 1.1.4: yearofmoo.com/2013/04/animation-in-angularjs.html - person Jason Slocomb; 20.05.2013