有没有一种简单的方法可以移动使用 Zepto 制作动画的隐藏图像?

发布于 2024-12-27 07:17:15 字数 182 浏览 0 评论 0原文

我目前正在尝试让图像以某些路径在屏幕上移动。当它完成一个时,它会隐藏自己,然后再次移动到起点以等待用户输入并开始下一个。我在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

旧城烟雨 2025-01-03 07:17:15

你所说的崩溃是什么意思?我猜测您在动画完成时使用回调来触发下一步,并且您使用 display:nonevisibility: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 or visibility: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.)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文