有没有一种简单的方法可以移动使用 Zepto 制作动画的隐藏图像?
我目前正在尝试让图像以某些路径在屏幕上移动。当它完成一个时,它会隐藏自己,然后再次移动到起点以等待用户输入并开始下一个。我在 Zepto 中使用 anim 函数来实现这两个功能,但是我注意到,当隐藏时设置动画时,程序会崩溃。有人可以告诉我如何解决这个问题,无论是通过不同的移动方式还是我需要用 anim() 做些什么?
感谢您的帮助。
I am currently trying to have an image move around the screen in certain paths. When it finishes one, it hides itself, then moves to the start point again to wait for user input and start the next. I'm using the anim function in Zepto for both of these, however I am noticing that when animated while hidden, the program crashes. Can someone tell me how I can fix this, either through a different way of moving it or something I need to do with anim()?
Thanks for the help.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
你所说的崩溃是什么意思?我猜测您在动画完成时使用回调来触发下一步,并且您使用
display:none
或visibility:hidden
来隐藏您的元素。如果是这种情况,您面临的问题是当没有动画发生时动画回调不会触发。该回调基于 webkitTransitionEnd 函数,该函数仅在发生转换时触发。对于 A) 布尔属性(如可见性)和 B) 完全隐藏且未渲染的对象,这些转换实际上不会发生。
克服这个问题的最简单方法是让您的图像永远不会从渲染中删除,方法是使用
opacity: 0
使其消失或将其 z-index 更改为低于所有其他元素。通常,我所做的是有两种状态:{opacity:1, zIndex: 10000}
和{opacity:0, zIndex: -1}
。这样,当对象完全淡出时,它不会遮挡其他元素,并且会平滑地淡出。 (zIndex 从 -1 到 1 是在非常低的不透明度下发生的。)What do you mean by crashes? I am guessing you are using a callback when your animation completes to trigger the next step AND you are using either
display:none
orvisibility:hidden
to hide your element.If this is the case, the problem you are facing is that the anim callback does not fire when no animation takes place. The callback is based on the webkitTransitionEnd function which only fires if a transition occurs. These transitions won't actually occur for A) boolean properties like visibility and B) objects that are completely hidden and not being rendered.
The easiest way to overcome this would be to have your image never be removed from rendering, by disappearing it using
opacity: 0
or changing its z-index to be below all other elements. Typically, what I do is have two states:{opacity:1, zIndex: 10000}
and{opacity:0, zIndex: -1}
. This way, when the object is completely faded out it won't block other elements and it will fade smoothly. (zIndex from -1 to 1 is happens at very low opacity.)