Question

我的第一个Stackoverflow问题。补间似乎运行，因为它最后调用了粗体函数。但是，没有发生任何补间。

＆＃13;

window.onload=init();
function init() {
    testImg = document.getElementById("testImg");
    createjs.Tween.get(testImg).wait(2000).to({alpha: 1}, 600).call(brute);
}
function brute() {
    // why this function get called if there's no visible tween?
    console.log("testImg alpha is " + testImg.alpha)
    testImg.style.opacity=1;
}

＆＃13;

#testImg {
    opacity: .3;
    background: url("http://oyos.org/oyosbtn_466x621.jpg");
}

＆＃13;

<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>

<body>
    <div id="testImg">
        here is the div
    </div>
</body>

＆＃13;

Answer 1

TweenJS并未真正针对HTML元素上的补间样式进行优化，因为它是针对对象直接补间属性而开发的。有一个CSS plugin可以提供帮助，特别是在处理具有后缀的属性时（如宽度/高度上的“px”等）

然而，绝对可以做到。您的代码存在一些问题：

正如您在上面的评论中所提到的，您必须改为定位“不透明度”。 public ActionResult HitAjax(string FirName, string LatName) { return View(); }属性是EaselJS DisplayObjects使用的属性。
您必须定位alpha，因为不透明度存在于该元素上，而不是直接位于testImg.style上。在#testImg上设置不透明度/ alpha将无效
不幸的是，TweenJS不知道如何使用CSS类或选择器读取元素上设置的CSS属性。查找testImg 非常非常昂贵，并且需要确定元素的当前样式。

你可以完全让你的演示工作，但你必须考虑这些事情。这是一个更新的代码段（来自此pen）：

getComputedStyle

您也可以使用createjs.Tween.get(testImg.style) // Target the style .to({opacity:0.3}) // Set the property initially .wait(2000) .to({opacity: 1}, 600) .call(brute); // Tween the opacity instead事件自行更新不透明度：

change

请注意，我上面提到的CSS插件可以现在处理computedStyle查找（最近添加）。

希望能够对行为有所了解。欢呼声，

TweenJS javascript

1 个答案: