В firefox не работает transition opacity?
В firefox не работает transition opacity
Во всех остальных браузерах корректно отображается , как исправить этот баг
.picture { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100vh; height: 100svh; background-size: cover; background-repeat: no-repeat; background-position: top; opacity: 0; transition: 0.6s all; } .picture_style_1 { background-image: url('../img/main-1.jpg'); opacity: 1; } |
.picture { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100vh; height: 100svh; background-size: cover; background-repeat: no-repeat; background-position: top; opacity: 0; transition: 0.6s all; } .picture_style_1 { background-image: url('../img/main-1.jpg'); opacity: 1; }
Дополнительно:
у меня и в огнелисе opacity вполне себе анимируется
вангую, проблема в неуспевающем обновиться background-image, но это не точно
И заменила бы all на opacity. Зачем там all, если анимируется только одно конкретное свойство?
т.е происходит смена background-image при переключении слайда
if(picture) {
picture.classList.add(`picture_style_${swiper.realIndex + 1}`); // +1 для того, чтобы не было класса типа .picture_style_0.
/*Обрабатываем событие смены слайда*/
swiper.on('slideChange', function() {
picture.className = 'picture'; //"Сбрасываем" стиль шапки на значение по умолчанию
picture.classList.add(`picture_style_${swiper.realIndex + 1}`); //В зависимости от того, на каком по счёту слайде сейчас находимся, устанавливаем соответствующий стиль шапке
});
}@IvanU7n,
Ответы:
Я думаю, с порядком свойств transition лучше не испытывать судьбу, и ставить их в том порядке, как вы видите это в справочнике:
transition: all 0.6s;
По содержанию можно распарсить, какой тип свойства разработчик имел ввиду, но думаю, это не обязывает интерпретатор CSS обладать этим в функционалом. Может вы и словили этот момент в конкретном браузере.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы использовать transition в CSS для свойства opacity в Firefox, необходимо учитывать некоторые особенности этого браузера.
Одна из основных причин, почему transition opacity может не работать в Firefox, заключается в том, что этот браузер требует явного указания начального значения opacity для элемента, к которому применяется transition.
Вот пример кода, который позволит вам использовать transition opacity в Firefox:
.element { opacity: 0; } .element:hover { opacity: 1; transition: opacity 0.5s; }
В этом примере мы явно указываем начальное значение opacity для элемента .element, а затем при наведении курсора меняем его на 1 с использованием transition.
Также убедитесь, что у вас правильно указаны префиксы для свойства transition, так как Firefox требует их для корректной работы. Например, вы можете использовать следующий код:
.element { opacity: 0; } .element:hover { opacity: 1; -moz-transition: opacity 0.5s; transition: opacity 0.5s; }
Если после всех этих действий transition opacity все равно не работает в Firefox, попробуйте обновить браузер до последней версии или проверьте другие возможные причины, такие как конфликты стилей или другие CSS правила, которые могут влиять на этот эффект.