Есть ли простой способ переместить скрытое изображение, анимированное с Zepto?

Question

В настоящее время я пытаюсь, чтобы изображение перемещалось по экрану на определенных путях. Когда он заканчивает один, он прячется, затем снова перемещается в начальную точку, чтобы ждать ввода пользователя и запустить следующий. Я использую функцию анимации в Zepto для обоих из них, однако я замечаю, что при анимации во время скрытия программа сбоя. Может ли кто -нибудь сказать мне, как я могу это исправить, либо через другой способ перемещения, либо что -то, что мне нужно сделать с Anim ()?

Спасибо за помощь.

Answer 1

Что вы имеете в виду под авариями? Я предполагаю, что вы используете обратный вызов, когда ваша анимация завершается, чтобы вызвать следующий шаг, и вы используете либо display:none или же visibility:hidden Чтобы скрыть свой элемент.

Если это так, проблема, с которой вы сталкиваетесь, заключается в том, что обратный вызов анимации не стреляет, когда не происходит анимации. Обратный вызов основан на функции WebKitTransitionEnd, которая стреляет только в случае происшествия. Эти переходы на самом деле не будут происходить для а) логических свойств, таких как видимость и б) объекты, которые полностью скрыты и не отображаются.

Самый простой способ преодолеть это было бы, чтобы ваше изображение никогда не было удалено из рендеринга, исчезая его, используя opacity: 0 или изменение его z-индекса, чтобы быть ниже всех других элементов. Как правило, я делаю два состояния: {opacity:1, zIndex: 10000} а также {opacity:0, zIndex: -1}. Анкет Таким образом, когда объект полностью исчез, он не блокирует другие элементы, и он будет плавно исчезать. (Zindex от -1 до 1 происходит с очень низкой непрозрачностью.)