在javaScript中重置元素的y位置
[英]reseting y position of an element in javaScript
问题描述
i have a canvas who is tweening upwards by a button click. 
我有一个通过单击按钮向上补间的画布。 I am trying to make it go back down after the tween is over, but it just does'nt work. 我正在尝试使其在补间结束后退回去，但它不起作用。 It starts off fine at the top of the screen. 它在屏幕顶部开始正常。 the first time i click the button it does go down to 400, and then slides up to 200. but on the next click - it would just keep flying up, instead of going back to 400 first. 第一次单击该按钮时，它确实下降到400，然后滑到200。但是在下一次单击时，它会一直飞起来，而不是先回到400。 Please help! 请帮忙！ :) :)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<script src=
"http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
</head>
<body>
<button onclick="func();">click</button> <canvas height="100" id="canvas"
style="position:absolute; top:50px; border:3px solid #000000;" width=
"200"></canvas>
<script>
var c = document.getElementById("canvas");
function func(){
c.style.top = 400 + "px";
TweenMax.to(c,2,{y: "-=200", onComplete:foo});
}
function foo(){
c.style.top = "400px";
}
</script>
</body>
</html>
2 个解决方案
解决方案1
0 2013-08-25 10:52:11
c.style.top have nothing to do with y modifications from TweenMax once the tweening happened. 一旦发生补间， c.style.top与TweenMax的y修改无关。 On a first call of TweenMax.to , TweenMax creates a transform matrix (custom style) on the object, and stops paying attention to regular css properties from this point on. 在首次调用TweenMax.to ，TweenMax在对象上创建一个转换矩阵（自定义样式），并从此开始不再关注常规的CSS属性。
You have to define startAt: {y: '400px'} in your .to call to force TweenMax to reset tweening to a static value. 你必须定义startAt: {y: '400px'}在你的.to叫强制TweenMax到渐变重置为静态值。
解决方案2
0 2013-08-25 10:54:31
The problem is that that this tweening plug-in actually changes transform CSS property to make the transition. 问题在于，此补间插件实际上会更改transform CSS属性以进行过渡。 Thus, make any changes in elements' style.top won't affect its position, as it is overrode by TweenMax's, browser-specific, transform . 因此，对元素的style.top进行任何更改style.top不会影响其位置，因为TweenMax的特定于浏览器的transform会覆盖它。
You can use their startAt property to always start at the desired position. 您可以使用它们的startAt属性始终从所需位置开始。 I don't recommend this plug-in though, I personally prefer jQuery . 我不建议使用此插件，我个人更喜欢jQuery 。
Demo: http://jsfiddle.net/TyZhB/2/ 演示： http ： //jsfiddle.net/TyZhB/2/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.