javascript - 在多个元素上使用 TweenMax

Question

我正在处理一个不包含 jQuery 的 Angular TreeView 指令。我正在使用 TweenMax 打开和关闭树的分支。 TweenMax 似乎只适用于 id。我现在只能使用 id“list”打开和关闭顶部分支。我有多个分支需要定位，但我没有 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();
        });

    }
}
});

Answer 1

您可以将 HTML 元素传递给 TweenMax.from 函数以及选择器(请参阅 documentation )。另请注意，Angular 包含一个名为 jQuery lite 的 jQuery 精简版本，您可以使用它来包装元素并在其上运行 jQuery 函数的有限子集 ( documentation )。

可能有一种更简洁的方法来做到这一点，但是您可以通过应用上述技术来完成您想要做的事情，如下所示(更新 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();
            });
        }
    }
});