Исходный вопрос ... обновленный рабочий код ниже:
У меня есть загружаемое изображение, которое появляется во время события загрузки ajax. Изображение отображается / скрывается путем добавления или удаления класса «загрузка» к элементу body. В настоящее время загружаемое изображение анимирует размер фона от 0 до 100% и плавно изменяет непрозрачность (наоборот, для перехода «возврат»).
Однако я хочу добиться того, чтобы переход размера фона происходил мгновенно (а не переход) при исчезновении звука, поэтому:
Затухание: непрозрачность от 1 до 0 дюймов.2 секунды, размер фона от 100% до 0 должен происходить мгновенно
#loader {
ширина: 100%;
высота: 100%;
положение: фиксированное;
верх: 0;
слева: 0;
z-индекс: -1;
непрозрачность: 0;
-moz-opacity: 0;
переход: все .2s легкость входа-выхода
}
#loader .image {
ширина: 400 пикселей;
высота: 138 пикселей;
дисплей: блок;
позиция: абсолютная;
z-индекс: 2000;
верх: 50%;
осталось: 50%;
маржа: 0;
фон: url (assets / images / loading.png) no-repeat;
размер фона: 0 0;
переход: все .2s легкость входа-выхода;
-webkit-animation: плавность импульса 400 мс бесконечная чередование;
-моз-анимация: импульс 400мс, плавность бесконечная чередование;
-о-анимация: импульс 400 мс замедление бесконечное чередование;
анимация: импульс 400 мс замедление бесконечное чередование
}
.loading #loader {z-index: 1000; цвет фона: rgba (255,255,255, .7)}
.loading #loader .image {
размер фона: 100% 100%;
маржа: -69px 0 0 -200px;
переход: непрозрачность .2s легкость выхода
}
Я изменил свойство перехода для этого селектора .loading #loader .image
на «непрозрачность», а не «все», но он по-прежнему выполняет переход размера фона.
Кто-нибудь знает, как добиться с помощью css3 различных переходов постепенного появления и исчезновения, описанных выше? Спасибо!
Обновленный рабочий код
Проблема заключалась в разделении отдельных свойств (поля, фона) на список, разделенный запятыми. Я считаю, что использование перехода: все лишит вас возможности выполнять различные переходы IN и OUT .
#loader {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
-moz-opacity: 0;
.transition(opacity,.4s);
}
#loader .image {
width: 400px;
height: 138px;
display: block;
position: absolute;
z-index: 2000;
top: 50%;
left: 50%;
margin: 0;
background: url(assets/images/loading.png) no-repeat;
background-size: 0 0;
-webkit-transition: margin .4s ease-in-out;
-moz-transition: margin .4s ease-in-out;
-o-transition: margin .4s ease-in-out;
-ms-transition: margin .4s ease-in-out;
transition: margin .4s ease-in-out;
-webkit-animation: pulse 400ms ease-out infinite alternate;
-moz-animation: pulse 400ms ease-out infinite alternate;
-o-animation: pulse 400ms ease-out infinite alternate;
animation: pulse 400ms ease-out infinite alternate
}
.loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)}
.loading #loader .image {
background-size: 100% 100%;
margin: -69px 0 0 -200px;
-webkit-transition: background .4s ease-in-out, margin .4s ease-in-out;
-moz-transition: background .4s ease-in-out, margin .4s ease-in-out;
-o-transition: background .4s ease-in-out, margin .4s ease-in-out;
-ms-transition: background .4s ease-in-out, margin .4s ease-in-out;
transition: background .4s ease-in-out, margin .4s ease-in-out;
}