跨度元素上的 GreenSock 动画答案

【问题标题】：GreenSock Animations on span elements跨度元素上的 GreenSock 动画
【发布时间】：2013-09-23 12:16:10
【问题描述】：

我正在执行简单的 Greensock 动画，我无法在跨度元素上执行任何动画..即使我执行的任何动画它只是闪烁都可以提供任何帮助。我的 span 元素定义有什么问题吗？

这是代码。

<div id="prac">
    <div><span>1</span><span>2</span><span>3</span><span>4</span></div>
  </div>

CSS 样式

#prac span{padding:20px;border:1px dashed blue;background:violet;margin:5px;}

JS TweenMax.staggerFrom($("#prac").find("span"), 0.4, {scale:0, rotation:-360, autoAlpha:0},0.1)

【问题讨论】：

标签： html css gsap

【解决方案1】：

您需要将span 设置为block 或inline-block，因为默认情况下它是inline，因此它无法进行动画处理。

【讨论】：

【解决方案2】：

SPAN 元素默认样式为“内联”，不会独立于其父元素移动。

您需要将 CSS 中的“display”属性设置为“block”或“inline-block”。

试试这个：

#prac span{padding:20px;border:1px dashed blue;background:violet;margin:5px;display:block}

或者，您可以从 SPAN 更改为 DIV。

【讨论】：