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

【问题标题】：Is there an easy way to move a hidden image animated with Zepto?有没有一种简单的方法可以移动使用 Zepto 制作动画的隐藏图像？
【发布时间】：2012-01-13 20:38:36
【问题描述】：

我目前正在尝试让图像以某些路径在屏幕上移动。当它完成一个时，它会隐藏自己，然后再次移动到起点等待用户输入并开始下一个。我在 Zepto 中对这两个都使用了 anim 函数，但是我注意到在隐藏时设置动画时，程序会崩溃。有人可以告诉我如何解决这个问题，无论是通过不同的移动方式还是我需要用 anim() 做的事情？

感谢您的帮助。

【问题讨论】：

标签： javascript zepto

【解决方案1】：

崩溃是什么意思？我猜您在动画完成时正在使用回调来触发下一步，并且您正在使用 display:none 或 visibility:hidden 来隐藏您的元素。

如果是这种情况，您面临的问题是动画回调不会在没有动画发生时触发。回调基于 webkitTransitionEnd 函数，该函数仅在发生转换时触发。对于 A) 布尔属性（如可见性）和 B) 完全隐藏且未呈现的对象，这些转换实际上不会发生。

解决这个问题的最简单方法是让您的图像永远不会从渲染中删除，方法是使用 opacity: 0 将其消失或将其 z-index 更改为低于所有其他元素。通常，我所做的是有两种状态：{opacity:1, zIndex: 10000} 和{opacity:0, zIndex: -1}。这样，当对象完全淡出时，它不会阻挡其他元素，并且会平滑淡出。（从 -1 到 1 的 zIndex 发生在非常低的不透明度下。）

【讨论】：