TweenLite.selector

TweenLite.selector : * = document.getElementById()
当动画接收字符串作为其目标时使用的选择器引擎(如jQuery,但默认为document.querySelectorAll())。

TweenMax的对象选择器接受dom或者string作为目标,如"#myID"。TweenMax 不依赖jQuery,但如果引入了jQuery,TweenMax会优先使用jQuery的选择器,如"p:first",否则回退到document.querySelectorAll()及document.getElementById()。

接入了Jquery时,可用以下
new TweenMax($("p:first"), 3, { x: 500,});
new TweenMax("p:first", 3, { x: 500,});
不接入Jquery时,可用以下
new TweenMax("#obj p", 3, { x: 500,}); 
new TweenMax(".obj1", 3, { x: 500,}); 
自定义选择器引擎selector,只适用于TweenLite
TweenLite.selector  = function(e){
    return document.getElementsByClassName(e);
}
TweenLite.selector适用于TweenMaxTweenLite

TweenLite.selector效果展示

  • HTML
  • CSS
  • JS
  • 展示
.box {
    width:50px;
    height:50px;
    border-radius:6px;
    margin-top:4px;
    display:inline-block
  }
.green{
    background-color:#6fb936;
  }
TweenLite.selector  = function(e){
    return document.getElementsByClassName(e);
}
new TweenLite('box', 3, {
    x: 500,
});
重播

转载原创文章请注明:文章转载自:TweenMax中文网 [https://www.tweenmax.com.cn]
本文地址:https://www.tweenmax.com.cn/api/tweenmax/TweenLite.selector