TextPlugin文档

TweenMax没有包含TextPlugin。

TextPlugin用于将新文本逐字替换原文本。

365体育官网-ribo88_365手机体育投注_365体育在线国外网址关键词:text

  • HTML
  • CSS
  • JS
  • 展示


旧文本
#myText{
  font-size:200%;
}
.class1{
  color:#6fb936;
}
.class2{
  color:#f38630;
}
var tm = new TimelineMax({repeat: -1});
tm.to("#myText", 2, {text:{value:"春眠不觉晓",newClass:"class2", oldClass:"class1"}, ease:Linear.easeNone})
  .to("#myText", 2, {text:{value:"处处闻啼鸟",newClass:"class2", oldClass:"class1"}, ease:Linear.easeNone})
  .to("#myText", 2, {text:{value:"夜来风雨声",newClass:"class2", oldClass:"class1"}, ease:Linear.easeNone})
  .to("#myText", 2, {text:{value:"花落知多少",newClass:"class2", oldClass:"class1"}, ease:Linear.easeNone})
  .to("#myText", 2, {text:{value:"完",newClass:"class2", oldClass:"class1"}, ease:Linear.easeNone});
重播
//2秒之内将yourElement的文字更新为"This is the new text"
TweenLite.to(yourElement, 2, {text:"This is the new text", ease:Linear.easeNone});

//设置文本分隔符delimiter为" ",实现英文逐词显示。此时需要添加关键词value
TweenLite.to(yourElement, 2, {text:{value:"This is the new text", delimiter:" "}, ease:Linear.easeNone});

//为旧文本和新文本添加样式 
TweenLite.to(yourElement, 2, {text:{value:"This is the new text", newClass:"class2", oldClass:"class1"}, ease:Power2.easeIn});

//当新文本比旧文本短时,为了避免旧文字缩进,可设置padSpace,用空格来补位(英文适用)
TweenLite.to(yourElement, 1, {text:{value:"shorter new text", padSpace:true}});
参数 类型 必填 说明
value String 需要显示的新文本,使用默认设置时可以省略此前缀。
newClass String 为新文字添加样式名
oldClass String 为原文字添加样式名
delimiter String 文字分隔符,默认是逐字显示,如果希望逐词(英文)显示,可以设置词句分隔符为空格符" "。Default: ""
padSpace Boolean 当新文本比旧文本短时,为了避免旧文字缩进,可设置padSpace,用空格来补位(英文适用)