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], тоже не получилось. Что-то я не так делаю. |
Цитата:
|
Цитата:
|
Вот если транзакцию запускать по событию, например hover, вот тогда и в лисе будет работать, но нужно просто по смене.
|
Кажется придумал как сделать можно, попробую.
|
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>
|
Во-первых таймер, во вторых изображений может быть с десяток и более, это не постоянная величина, а смена изображений вынесена в отдельный css, потому, что это общее правило для css различных тем. Не хотелось быть изменять css-файлы тем.
Хотелось бы так: добавили в фон еще изображение, анимировали, а затем по событию transitionend удаляли старое. PS. Смена изображений запускается по выбору элементов на странице, не по таймеру постоянная смена. А с добавлением правила opacity попробую комбинацию. |
laimas,
когда-то background-image умел анимировать только хром, сейчас не знаю. |
Сейчас и Опера, которая его движок использует, тоже анимирует. Надо попробовать комбинацию добавления изображения+прозрачность, может получится.
Была идея добавлять класс и у этого класса определять изменения, Опера, Хром работают, а Лиса упорно в норе сидит. ) |
Лиса и это до сих пор не утрясла <link rel="preload" as="image", а в остальных все норма, удобно.
|
| Часовой пояс GMT +3, время: 18:40. |