html - 跨度元素上的 GreenSock 动画

Question

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

这是代码。

<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)

score 6 · Accepted Answer

默认情况下，您需要制作您span的 ablock或inline-block原样inline，因此它无法制作动画。

score 0 · Accepted Answer

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

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

试试这个：

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

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

2 回答 2