问简单的TweenJS :推特div
EN

Stack Overflow用户

提问于 2016-06-22 14:17:54

回答 1查看 1.8K关注 0票数 4

我试着用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>

但这不起作用，也不会抛出任何错误。

tweenjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-06-23 15:20:20

TweenJS并不真正知道如何在DIV的属性之间切换，因为它们并不直接存在于元素上，而是存在于CSS样式对象上，并且使用字符串值(例如"2px")而不是数字。您可以安装TweenJS CSSPlugin，这会使许多CSS属性变得可以使用，包括位置、旋转和不透明度。

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

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

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

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

下面是一个有用的小提琴：http://jsfiddle.net/xc3pt2b8/

编辑在TweenJS 1.0.0中更新的CSSPlugin将在打开compute标志时与计算样式一起工作。它的表演效果不太好，但更强大。https://createjs.com/docs/tweenjs/classes/CSSPlugin.html

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37970773

复制

相似问题

问简单的TweenJS :推特div
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单的TweenJS :推特divEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单的TweenJS :推特div
EN