ИДЕЯ СОСТОИТ В ТОМ, ЧТОБЫ ПОКАЗАТЬ УВЕДОМЛЕНИЕ ИЛИ ПРЕДУПРЕЖДЕНИЕ НА ОПРЕДЕЛЕННОЕ ВРЕМЯ, А ЗАТЕМ ЗАСТАВИТЬ ЕГО ИСЧЕЗНУТЬ.
Мы будем использовать небольшой индикатор, чтобы показать, сколько времени осталось до того момента, как окно исчезнет.
Разметка будет очень простая, это будет обыкновенный div с сообщением внутри, также он будет содержать дополнительный блок для индикатора:
<div class="tn-box tn-box-color-1"> <p>Ваши настройки были успешно сохранены!</p> <div class="tn-progress"></div> </div>
Окно сообщения будет иметь классы tn-box и tn-box-color-1, который будет использоваться для определения различных цветов.
Затем мы определим стили окна:
.tn-box {
width: 360px;
position: relative;
margin: 0 auto 20px auto;
padding: 25px 15px;
text-align: left;
border-radius: 5px;
box-shadow:
0 1px 1px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.6);
opacity: 0;
cursor: default;
display: none;
}
.tn-box-color-1{
background: #ffe691;
border: 1px solid #f6db7b;
}Мы установим для окна свойство display: none и зададим ему нулевую прозрачность.
Индикатор будет иметь следующие стили:
.tn-progress {
width: 0;
height: 4px;
background: rgba(255,255,255,0.3);
position: absolute;
bottom: 5px;
left: 2%;
border-radius: 3px;
box-shadow:
inset 0 1px 1px rgba(0,0,0,0.05),
0 -1px 0 rgba(255,255,255,0.6);
}Первоначально, прогресс-бар будет иметь ширину 0.
В этом примере я использую кнопку с флажком, после того как он будет отмечен, начнется анимация:
input.fire-check:checked ~ section .tn-box {
display: block;
animation: fadeOut 5s linear forwards;
}
input.fire-check:checked ~ section .tn-box .tn-progress {
animation: runProgress 4s linear forwards 0.5s;
}Кнопке предшествует секция с блоками сообщений и поэтому я могу использовать обобщенный родственный комбинатор (general sibling combinator).
Если вы подразумеваете скрипт для класов
.tn-box.tn-box-active {
display: block;
animation: fadeOut 5s linear forwards;
}
.tn-box.tn-box-active .tn-progress {
animation: runProgress 4s linear forwards 0.5s;
}где tn-box-active является классом, который вы добавляете к div-у с классом tn-box.
Анимация для самого блока создается следующим образом:
@keyframes fadeOut {
0% { opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; transform: translateY(0px);}
99% { opacity: 0; transform: translateY(-30px);}
100% { opacity: 0; }
}Я назвал её "fadeOut", исчезая, окно как бы постепенно угасает и немного перемещается вверх.
Анимация для индикатора выглядит следующим образом:
@keyframes runProgress {
0% { width: 0%; background: rgba(255,255,255,0.3); }
100% { width: 96%; background: rgba(255,255,255,1); }
}Мы анимируем ширину до 96% (слева был отступ 2%, поэтому мы хотим установить также отступ 2% справа) и увеличим непрозрачность в rgba.
Продолжительность анимации прогресс-бара будет немного меньше, чем продолжительность анимации окна, так как мы начнем её немного позже.
Примечание: при наведении курсора мыши, я думаю, будет хорошо, если наступит пауза в анимации. Это имеет смысл, если пользователь хочет внимательно прочитать то, что написано в сообщении. Но, к сожалению, кажется, есть некоторые проблемы с WebKit-браузерами. В Chrome (19.0.1084.56 на Win) анимация ломается, в то время как в Safari (5.1.5 Win) я получаю отчет о сбое в WebKit2WebProcess.exe ... Но зато это отлично работает в Firefox> 12.0.
Во всяком случае, вот как вы можете это сделать:
.tn-box.tn-box-hoverpause:hover,
.tn-box.tn-box-hoverpause:hover .tn-progress{
animation-play-state: paused;
}Излишне говорить, что это будет работать только в браузерах, поддерживающих CSS-анимацию! Вам нужен будет какой-то резервный javascript для других браузеров.
[think=http://www.kolobok.us/smiles/standart/smoke.gif] 😎 И это все! Я надеюсь, вам понравилось![/think]
- Подпись автора