简单的 TweenJS：补间 div

Question

我正在尝试使用 TweenJS 做一些非常简单的事情，在使用 GSAP 之后我发现它不太直观。只想补间 div - 已经设置为包含图像 - 与 CSS/HTML:

<script type="text/javascript" src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script type="text/javascript" src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>

<script>

function init() {

        stage = new createjs.Stage("canvas1");

        var txt1 = document.getElementById("Div_txt1");  
        createjs.Tween.get(txt1).to({opacity: 0}, 1000);

}      

</script>    

<body onload="init();">
<canvas id="canvas1" width="300" height="250"></canvas>
</body>
</html>

但这不起作用并且不会引发任何错误。

Answer 1

TweenJS 并不知道如何补间 DIV 的属性，因为它们不直接存在于元素上，而是存在于 CSS 样式对象上，并使用字符串值（例如作为“2px”）而不是数字。您可以安装 TweenJS CSS 插件，它使许多 CSS 属性变得可补间，包括位置、旋转和不透明度。

<script src="https://rawgit.com/CreateJS/TweenJS/master/src/tweenjs/CSSPlugin.js"></script>

// Sample code
createjs.Tween.get(div).to({opacity: 0}, 1000);

这个插件是为了展示插件如何工作而创建的，所以它非常简单，因此它只理解直接在元素上的补间属性，而不是在 CSS 类中定义。这意味着您必须添加内联样式才能使其工作：

<div id="div" style="opacity:1">Text</div>

这是一个有效的 fiddle：http://jsfiddle.net/xc3pt2b8/

编辑 TweenJS 1.0.0 中更新的 CSS 插件将在 compute 标志打开时使用计算样式。它的性能较低，但功能更强大。 https://createjs.com/docs/tweenjs/classes/CSSPlugin.html

简单的 TweenJS：补间 div

Simple TweenJS : tweening a div

tweenjs