Существует ли простой способ перемещения скрытого изображения, анимированного с помощью Zepto?

Question

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

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

Answer 1

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

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

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