24.01.2020, 17:04
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
selector::after background-image
В общих свойствах селектора задан размер, позиция и т.д., и в том числе
opacity: .85
transition: background-image 0.4s ease-in
В отдельном css для этого селектора прописан url изображения (в общем чтобы не ковыряться во всем). Этот путь изменяется так:
element.sheet.insertRule('.window::after{background-image:url("'+newimage+'")}', 1);
element.sheet.deleteRule(0);
И для Хрома, Оперы этого достаточно чтобы была анимация фона, а Лиса не хочет. Она конечно делает прозрачность фона указанную и все. Пробовал анимацию определять непосредственно для cssRules[index], тоже не получилось. Что-то я не так делаю.
Последний раз редактировалось laimas, 24.01.2020 в 17:08.
|
|
24.01.2020, 17:09
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сообщение от laimas
|
|
transition: background-image
|
а лиса это поддерживает? |
|
24.01.2020, 17:11
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от рони
|
|
а лиса это поддерживает?
|
Надо посмотреть, но ей все равно пофигу даже если указать background или all. |
|
24.01.2020, 17:16
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Вот если транзакцию запускать по событию, например hover, вот тогда и в лисе будет работать, но нужно просто по смене.
|
|
24.01.2020, 17:25
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Кажется придумал как сделать можно, попробую.
|
|
24.01.2020, 17:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
laimas,
может так?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.window:before {
background-image: url(http://placekitten.com/1200/900);
}
.window:after {
background-image: url(http://placekitten.com/1000/750);
}
.window
{
width: 400px;
height: 300px;
position: relative;
border: 1px solid green;
}
.window:after, .window:before{
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-size: cover;
opacity: .85;
transition: opacity 0.4s ease-in;
}
</style>
</head>
<body>
<div class="window" ></div>
<script>
window.setTimeout(function() {
document.styleSheets[0].insertRule('.window::after{opacity: 0}', 4);
}, 1000)
</script>
</body>
</html>
|
|
24.01.2020, 18:00
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Во-первых таймер, во вторых изображений может быть с десяток и более, это не постоянная величина, а смена изображений вынесена в отдельный css, потому, что это общее правило для css различных тем. Не хотелось быть изменять css-файлы тем.
Хотелось бы так: добавили в фон еще изображение, анимировали, а затем по событию transitionend удаляли старое.
PS. Смена изображений запускается по выбору элементов на странице, не по таймеру постоянная смена. А с добавлением правила opacity попробую комбинацию.
Последний раз редактировалось laimas, 24.01.2020 в 18:03.
|
|
24.01.2020, 18:01
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
laimas,
когда-то background-image умел анимировать только хром, сейчас не знаю.
|
|
24.01.2020, 18:07
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сейчас и Опера, которая его движок использует, тоже анимирует. Надо попробовать комбинацию добавления изображения+прозрачность, может получится.
Была идея добавлять класс и у этого класса определять изменения, Опера, Хром работают, а Лиса упорно в норе сидит. )
|
|
24.01.2020, 18:10
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Лиса и это до сих пор не утрясла <link rel="preload" as="image", а в остальных все норма, удобно.
|
|
|
|
