Angular ng-animate с помощта на javascript не работи според очакванията

Опитах се да внедря демонстрационния пример с помощта на JS, но нещо се обърка с ng-switch ... Виждам, че се добавят нови елементи в dom, но ng-switch не премахва нежеланите DIV. може ли да помогнете...

Ето го Fiddle...

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 и вашият код ще работи добре. Така че просто добавете следното преди тага на скрипта, който включва 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) Височината за първия ви ng-switch DIV е 0, но за втория е 20px. И 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