我正在使用 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>
最佳答案
它应该是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>
关于javascript - 动画边框速记属性时出现 Greensock TweenLite 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41831004/