Y at-il un moyen facile de déplacer une image cachée animée avec Zepto?

Question

Je tente actuellement d'avoir un mouvement d'image autour de l'écran dans certains chemins. Quand il se termine un, il se cache, puis se déplace vers le point de départ à nouveau d'attendre l'entrée d'utilisateur et commencer la suivante. J'utilise la fonction anim dans Zepto pour ces deux, mais je remarque que lorsque animé tout caché, le programme se bloque. Quelqu'un peut-il me dire comment je peux résoudre ce problème, que ce soit par le biais d'une manière différente de le déplacer ou quelque chose que je dois faire avec anim ()?

Merci pour l'aide.

Answer 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.)