jQuery / CSS анимация - мерцание исходного состояния над переходным состоянием - PullRequest
1 голос
/ 03 апреля 2012

У меня проблема с анимацией, мерцающей при завершении.Я использую смесь jQuery и CSS для слайдов, и моя проблема кажется мне уникальной.Точная проблема состоит в перемещении 200% ширины деления на 50% влево и вправо с использованием $("element").css("transform","translate(-50%,0px)"); в jQuery и transition:all 0.43s ease-in-out; в CSS (все правильные префиксы браузера повторяются при необходимости).

Анимация требуетпоместите безупречно до точки завершения, а затем в течение доли секунды он мигает исходное состояние, а затем обратно в переходное состояние.За исключением мерцания исходного состояния вместо переходного состояния в течение примерно 0,001 секунды, этот код работает точно так же, как и планировалось.

Особенно странным побочным явлением является то, что у меня (пользовательский JS, не фактический) выпадающие списки воба состояния, которые jQuery закрывает до того, как происходит анимация скольжения, но когда мерцание происходит, это показывает, что раскрывающийся список все еще раскрыт.При скольжении назад раскрывающийся список закрывается, как и должно быть.Ранее они работали безупречно, и сегодня я не коснулся ни одного фрагмента кода.

Буквально как будто он делает снимок экрана с состоянием страницы до анимации, делая именно то, что я хочу,а затем мигает снимок экрана с состоянием «до», чтобы преднамеренно насмехаться над мной.

К сожалению, я не могу опубликовать JSfiddle, потому что не могу воспроизвести проблему изолированно, и я совершенно уверен, что мой работодательне так, как я, чтобы выложить весь код здесь.Извините, я не могу предоставить больше.Спасибо за любую помощь, которую вы можете оказать.

(К любому удивлению, я рассмотрел довольно много других примеров, где overflow:hidden на родительском элементе останавливает мерцание определенных анимаций ипрыжки на свои конечные позиции без анимации последнего бита. Но это не то, что здесь происходит. У меня была эта проблема перед собой, и это не так).

**Обновление: При дальнейшем рассмотрении эта проблема возникает только в Chrome, а не в Safari или Firefox.Я обновил Chrome до 18.0.1025.142 сегодня, и это может быть проблемой.

1 Ответ

0 голосов
/ 07 апреля 2012

Решение одной из моих проблем было связано с поставляемыми браузером градиентами на не стилизованных объектах форм, распространяющихся по всей ширине и высоте страницы (даже в том случае, если по более низкому z-индексу, чем другие элементы, они были скрыты за) из-за ошибки «переменная не найдена» в моем JavaScript.Как только я определил переменную Javascript перед вызовом ее с помощью jQuery, странные градиенты исчезли.Я могу лишь объяснить странное поведение неправильным синтаксическим анализом, основанным на неспособности найти требуемую переменную.Хотя это казалось совершенно не связанным, это было правильное решение.

...