javascript - 动画边框速记属性时出现 Greensock TweenLite 问题

Question

我正在使用 Greensock TweenLite，我需要为 DOM 元素的边框设置动画。

如您所见，内联样式设置为:边框:实心 0px 黄色

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

边框:“实心 20px 蓝色”

但是动画没有执行。

我想知道是否支持简写属性和/或是否存在解决方法。

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纯蓝色(不是纯20px蓝色)

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