Использование TweenMax для нескольких элементов

У меня есть директива Angular treeview, над которой я работаю, и она не включает jQuery. Я использую TweenMax для открытия и закрытия ветвей дерева. Кажется, что TweenMax работает только с идентификаторами. Я могу открывать и закрывать только верхнюю ветку прямо сейчас с идентификатором «список». У меня есть несколько веток, на которые мне нужно ориентироваться, и у меня нет jQuery, чтобы помочь с классами. Есть ли обходной путь для этого? Вот ссылка на мой код в CodePen.io

Вот директива:

var tree = angular.module('treeview',[]);

tree.directive('treeView',function(){
return{
    restrict: 'AE',

    link:function (scope,elem,attrs){

        var list = TweenMax.from("#list",0.5,{height:0,paused:true,reversed:true});

            function toggle(){
                // e.preventDefault();
                if (list.reversed()) {
                    list.play();
                  } else {
                    list.reverse();
                  }

            }

        elem.on('click',function(e){


            toggle();


            e.stopPropagation();
        });

    }
}
});

javascript angularjs gsap
person mhyder1    schedule 07.08.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете передать элемент HTML функции TweenMax.from, а также селектору (см. документацию). Также обратите внимание, что angular включает урезанную версию jQuery, называемую jQuery lite, которую вы можете использовать для переноса элемента и запуска на нем ограниченного подмножества функций jQuery (документация).

Может быть более аккуратный способ сделать это, но вы можете сделать то, что пытаетесь сделать, применяя описанные выше методы следующим образом (обновлено CodePen):

var tree = angular.module('treeview',[]);
tree.directive('treeView',function(){
    return{
        restrict: 'AE',
        link:function (scope,elem,attrs){

            // Use jQuery lite to access the first child of the scoped element
            var ul = angular.element(elem).children(0);
            var list = TweenMax.from(ul,0.5,{height:0,paused:true,reversed:true});

            function toggle(){
                if (list.reversed()) {
                    list.play();
                  } else {
                    list.reverse();
                  }  
            }

            elem.on('click',function(e){
                toggle();
                e.stopPropagation();
            });
        }
    }
});
person net.uk.sweet    schedule 27.08.2014