动画边框短手时 Greensock TweenLite 问题属性

Question

我正在使用 Greensock TweenLite，我需要为 DOM 元素制作边框动画。

如您所见，内联样式设置为： border: solid 0px yellow

并使用 TweenLite 作为最终结果传递

border: "solid 20px blue"

但是动画没有执行

我想知道是否有 shorthand 属性是否受支持 and/or 是否存在解决方法。

var element = document.getElementById('target');

TweenLite.to(element, 2, {
  border: "solid 20px blue"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<div id="container" style="perspective: 200px">
  <div id="target" style=" width: 250px;  height: 250px; background-color: red; font-size: 100px; border: solid 0px yellow;">Hello</div>
</div>

Answer 1

应该是20px solid blue（不是solid 20px blue）

           ^^^^--- Size goes first

var element = document.getElementById('target');
TweenLite.to(element, 2, {border: "20px solid blue"});

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<div id="container" style="perspective: 200px">
  <div id="target" style=" width: 250px;  height: 250px; background-color: red; font-size: 100px; border: solid 0px yellow;">Hello</div>
</div>

动画边框短手时 Greensock TweenLite 问题属性

Greensock TweenLite issue when animating border short hand property

javascript

gsap

动画边框短手时 Greensock TweenLite 问题 属性

Greensock TweenLite issue when animating border short hand property

javascript

gsap

动画边框短手时 Greensock TweenLite 问题属性