У меня проблема с анимацией, мелькающей после завершения. Я использую сочетание jQuery и CSS для слайдов div, и моя проблема кажется мне уникальной. Точная проблема состоит в том, чтобы сдвинуть 200% ширину div на 50% влево и вправо, используя $("element").css("transform","translate(-50%,0px)"); в jQuery и transition:all 0.43s ease-in-out; в CSS (при необходимости все необходимые префиксы браузера повторяются).jQuery/CSS-анимация - исходное состояние мерцает над перешедшим состоянием
Анимация выполняется безупречно до момента завершения, а затем в течение секунды секунды она мигает исходным состоянием, а затем возвращается в состояние перехода. За исключением мерцания исходного состояния вместо перешедшего состояния около 0,001 секунды, этот код работает точно так, как планировалось.
Особенно странно, что у меня есть (пользовательские JS, а не фактические) выпадающие списки в обоих состояниях, которые jQuery закрывает до того, как происходит скользящая анимация, но когда происходит мерцание, это показывает, что раскрывающийся список все еще расширен. При отклонении назад выпадающее окно закрывается, как и должно быть. Они ранее работали вместе безупречно, и сегодня я не коснулся какой-либо части кода.
Это буквально так, как будто он делает снимок экрана о состоянии страницы перед анимацией, выполняя именно то, что я хочу, чтобы сделать это, а затем высвечивая снимок экрана перед состоянием, чтобы издеваться надо мной преднамеренно.
Я не могу опубликовать JSfiddle, к сожалению, потому что я не могу воспроизвести проблему изолированно, и я вполне уверен, что мой работодатель не хотел бы, чтобы я опубликовал весь код здесь. Извините, я не могу предоставить больше. Спасибо за любую помощь, которую вы можете дать.
(Любой интересно, я смотрел довольно много других примеров, когда
overflow:hiddenна родительском элементе остановится определенными анимации от мерцающих и прыжков в их конечные положения без анимации последнего бит. Но это не то, что здесь происходит. У меня была проблема с перед собой, и это не так).
** Обновление: При дальнейшем рассмотрении, эта проблема имеет место только в Chrome, а не в Safari или Firefox. Сегодня я обновил Chrome до 18.0.1025.142, и это может быть проблемой.
Без кода трудно помочь. В любом случае, Javascript - это клиентский интерфейс, поэтому, если это не интрасеть, нет никакой разницы, чтобы опубликовать его здесь, а также источник просмотра. Вы пытались удалить упрощение CSS и пытались реализовать все это через jQuery? –
** Еще одно обновление: ** Сегодня в Chrome появилось более странное явление, связанное с анимацией jQuery и CSS, включая ошибки отображения, где градиенты, которые нигде в коде не появляются, появляются на триггер перехода и отображаются по всему экрану. Есть как вертикальные, так и горизонтальные бары. Это не webkit, это сам Chrome; в Safari все работает нормально. То же самое с Firefox и т. Д. Похоже, у Chrome появилась ошибка анимации, но я не уверен, как избавиться от нее. И спасибо, Алекс, но нет, нет разницы при переключении на чистый jQuery. – InterfaceGuy
Hmph. Мне удалось каким-то образом решить все эти проблемы.И все они были совершенно разными решениями, чем я думал. На самом деле, да @Alex, мне показалось, что я полностью переключился на jQuery, но оказалось, что я редактировал неверный переход на странице, и я все еще видел проблемы с тем, что было реализовано в CSS. Как только я понял это и переключил * проблематичный один на jQuery, теперь он отлично работает в Chrome. Поэтому я немного в недоумении: был ли код CSS неправильным? У новой версии Chrome есть ошибка, связанная с jQuery/Javascript/CSS? Я до сих пор не знаю. – InterfaceGuy