Greensock TweenLiteの問題は、短絡のアニメーションをアニメーション化するときに発生します。

Question

Greensock TweenLiteを使用していて、DOM要素の境界線をアニメーション化する必要があります。あなたが見ることができるように

インラインスタイルに設定されています border: solid 0px yellow

とTweenLiteを使用して、私は最終的な結果として

border: "solid 20px blue"

を渡すが、アニメーションは実行されません。

簡略化されたプロパティがサポートされているか、回避策があるかどうかを知りたいと思います。

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>