#jquery #css #css-transitions
#jquery #css #css-переходы
Вопрос:
Codepen: (Вот codepen для тех, кто хочет сразу перейти. Попробуйте это в Chrome и IE, чтобы увидеть разницу в результатах)
Я пытаюсь использовать css3 преобразования / переходы, потому что, ну, они намного более гибкие, чем эффекты jquery.
У меня есть мобильная версия сайта, на которой вверху есть фиксированная панель с логотипом и навигатором. При щелчке или прикосновении к навигатору слева появляется боковая панель навигации.
Вот тут-то и появляется css3. У меня была рабочая версия этой функциональности только с jQuery, но анимация была действительно прерывистой на телефонах. Я скачал плагин jQuery transit, который в основном интегрирует css3 переходы в jQuery, как если бы они были анимациями (но это не относится к делу — я не думаю, что проблема заключается здесь).
В версии css3, когда я перемещаю тело содержимого и фиксированный заголовок с помощью x: [некоторая сумма], преобразование отображается по-разному для разных браузеров. В каждом настольном браузере, за исключением IE10, фиксированный заголовок вылетает вдвое больше, чем должен, в то время как тело содержимого сдвигается вправо на нужную величину. На моем телефоне в Chrome заголовок вылетает вдвое больше, чем должен, хотя в браузере Android по умолчанию этого не происходит.
Дополнительная информация: я проверил с помощью chrome inspector, и как заголовок, так и тело содержимого получают одинаковое преобразование ([некоторое число] пикселей, 0). ЗАГОЛОВОК ВЛОЖЕН В ТЕЛО СОДЕРЖИМОГО. Я думаю, что в этом и заключается проблема. Некоторые браузеры перемещают заголовок вместе с содержимым, а затем снова интерпретируют преобразование заголовка. С другой стороны, поскольку позиция фиксирована, некоторые браузеры интерпретируют два преобразования независимо.
Мой вопрос: какие технические особенности вызывают это несоответствие и что можно сделать, чтобы получить согласованные результаты во всех современных браузерах?
Codepen: (Как я уже сказал, в Chrome это работает не так, как ожидалось, но если вы попробуете IE, это сработает)
Комментарии:
1. Это поможет, если вы разместите ссылку на скрипку и некоторый код, чтобы мы могли видеть, что вы делаете.
2. Извините, я был в процессе создания тестового файла. Я добавил это в конце своего поста ^^. Загрузите codepen в IE и Chrome, чтобы понять, что я имею в виду.
Ответ №1:
Причиной этого является то, что navbar является дочерним элементом #bod элемента, при #bod перемещении navbar также перемещается вместе с ним. Вы также применили другой переход к панели навигации, который перемещает ее во второй раз. Различная обработка браузерами вызвана использованием перехода с «фиксированным» значением свойства. Более простым и применимым решением является использование метода toggleClass() #bod и достижение желаемого с меньшим количеством кода. Вот codepen . Добавление Css:
#bod {
transition: margin .5s ease-in-out;
}
#bod.menu-open {
margin-left: 30%;
}
и более простой js:
$("#toggle").on("touchstart mousedown", function (event) {
event.stopImmediatePropagation();
event.preventDefault();
$('#bod').toggleClass('menu-open');
});