Анимация модальных окон | Зона разработки

Познавая огромный мир Web-программирования я набрел на интересные примеры по анимации HTML элеметов используя возвожности CCS3. Я решил использовать их у себя для модальных окошек авторизации и регистрации. Выглядит достаточно интересно, поэтому решил показать, как это работает.

За основу я взял вот эти примеры. Там внизу есть кнопка для скачивания файла стилей. Единственный момент, для модальных окон нужно будет его доработать — добавить анимацию для закрытия окна. Делается она просто — копируем анимацию для открытия и делаем ее в обратном порядке. Ниже я покажу как.

Демо

Инструкция

Начнем с добавления модального окна на страницу.

Я использую на этом сайте фреймворк Bootstrap, поэтому беру его компонент для модальных окон. Т.е. на странице сайта и у вас должны загружаться bootstrap.css и bootstrap.js.

Вставляем на странице (в шаблоне или контенте ресурса) код модального диалога

<div class="modal fadeIn" id="test-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-keyboard="false" data-backdrop="static" data-method="fade" data-amination-time="500">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Модальное окно</h4>
        </div>
        <div class="modal-body">
            Тестовый диалог с анимацией fadeIn
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default btn-close">Закрыть</button>
        </div>
    </div>
  </div>
</div>

Тут нужно пояснить что к чему. Смотрим на первый div

<div class="modal fadeIn" id="test-modal" ... data-method="fade" data-amination-time="500">

Обратите внимание на класс fadeIn. Это класс для одноименного эффекта. Саму анимацию мы пропишем в css файле. В этом же диве мы видим вот такие строчки data-method="fade" и data-amination-time="500". Это нам пригодится в js файле, где мы будем обрабатывать анимацию. Поясню, что это за данные.

data-method="fade" - мы указываем метод анимации, но без окончания "In". Оно добавится автоматически в скрипте обработки. Почему так? Так как нам нужно не только открывать окно, но и закрывать его, я добавил еще css класс "fadeOut" для анимации закрытия. Чтобы здесь не писать 2 класса data-classIn="fadeIn" и data-classOut="fadeOut", я просто пишу "fade", а в скрипте окончания добавляются автоматически. Это важно для понимания, если будете добавлять свою анимацию. Например, для анимации "slideDown" я создаю два css класа - "slideDownIn" для открытия и "slideDownOut" для закрытия.
data-amination-time="500" - это время анимации, которое указано в css файле для этого класса анимации.

Теперь добавляем кнопку

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#test-modal">
  fadeIn эффект
</button>

Подключаем стили

Следующий шаг - css файл с анимацией. Берем файл, который я указывал выше и добавляем к каждому классу анимации окончание "In" (кроме fadeIn). Это будет анимация открытия окна. Дальше прописываем анимацию закрытия - копируем блок с анимацией открытия и меняем окончание "In" на "Out", а также меняем направление анимации на обратную (пример можно посмотреть ниже). Я уже сделал 3 вида анимации - fadeIn, slideUp и slideDown.

Код css (кликните чтобы раскрыть)

.fadeIn{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	
	animation-duration: .5s;	
	-webkit-animation-duration: 0.5s;
	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		
}
@keyframes fadeIn {
	0% {
		transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		transform: scale(1.1);	
	}
	80% {
		transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}
@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		-webkit-transform: scale(1.1);
	}
	80% {
		-webkit-transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}
.fadeOut{
	animation-name: fadeOut;
	-webkit-animation-name: fadeOut;	
	animation-duration: .5s;	
	-webkit-animation-duration: 0.5s;
	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		
}
@keyframes fadeOut {
	0% {
		transform: scale(1);
		opacity: 1;		
	}
	60% {
		transform: scale(0.9);	
        opacity: 1;	
	}
	80% {
		transform: scale(1.1);
	}	
	100% {
		transform: scale(0);
		opacity: 0;	
	}		
}
@-webkit-keyframes fadeOut {
	0% {
		-webkit-transform: scale(1);
		opacity: 1;		
	}
	60% {
		-webkit-transform: scale(0.9);
		opacity: 1;	
	}
	80% {
		-webkit-transform: scale(1.1);
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 0.0;	
	}		
}
/***************** slideDown *********************/
.slideDownIn{
	animation-name: slideDownIn;
	-webkit-animation-name: slideDownIn;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	
}
@keyframes slideDownIn {
	0% {transform: translateY(-100%);}
	50% {transform: translateY(8%);}
	65% {transform: translateY(-4%);}
	80% {transform: translateY(4%);}
	95% {transform: translateY(-2%);}			
	100% {transform: translateY(0%);}		
}
@-webkit-keyframes slideDownIn {
	0% {-webkit-transform: translateY(-100%);}
	50% {-webkit-transform: translateY(8%);}
	65% {-webkit-transform: translateY(-4%);}
	80% {-webkit-transform: translateY(4%);}
	95% {-webkit-transform: translateY(-2%);}			
	100% {-webkit-transform: translateY(0%);}	
}
.slideDownOut{
	animation-name: slideDownOut;
	-webkit-animation-name: slideDownOut;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;
}
@keyframes slideDownOut {
	0% {transform: translateY(0%);}
	50% {transform: translateY(-2%);}
	65% {transform: translateY(4%);}
	80% {transform: translateY(-4%);}
	95% {transform: translateY(8%%);}			
	100% {transform: translateY(-100%);}		
}
@-webkit-keyframes slideDownOut {
    0% {-webkit-transform: translateY(0%);}
	50% {-webkit-transform: translateY(-2%);}
	65% {-webkit-transform: translateY(4%);	}
	80% {-webkit-transform: translateY(-4%);}
	95% {-webkit-transform: translateY(8%%);}			
	100% {-webkit-transform: translateY(-100%);}	
}
/************** slideUp *****************/
.slideUpIn{
	animation-name: slideUpIn;
	-webkit-animation-name: slideUpIn;
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
	visibility: visible !important;			
}
@keyframes slideUpIn {
	0% {transform: translateY(100%);}
	50% {transform: translateY(-8%);}
	65% {transform: translateY(4%);}
	80% {transform: translateY(-4%);}
	95% {transform: translateY(2%);}			
	100% {transform: translateY(0%);}	
}

@-webkit-keyframes slideUpIn {
	0% {-webkit-transform: translateY(100%);}
	50% {-webkit-transform: translateY(-8%);}
	65% {-webkit-transform: translateY(4%);}
	80% {-webkit-transform: translateY(-4%);}
	95% {-webkit-transform: translateY(2%);}			
	100% {-webkit-transform: translateY(0%);}	
}
.slideUpOut{
	animation-name: slideUpOut;
	-webkit-animation-name: slideUpOut;
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
	visibility: visible !important;			
}

@keyframes slideUpOut {
	0% {transform: translateY(0%);}
	30% {transform: translateY(2%);}
	55% {transform: translateY(-4%);}
	100% {transform: translateY(100%);}	
}
@-webkit-keyframes slideUpOut {
	0% {-webkit-transform: translateY(0%);}
	30% {-webkit-transform: translateY(2%);}
	55% {-webkit-transform: translateY(-4%);}
	100% {-webkit-transform: translateY(100%);}	
}

Вставляем этот код на страницу или в файл.

Подключаем скрипты

Осталось подключить скрипт. Создаем файл с кодом, который указан ниже, или вставляем в уже существующий файл.

Код javascript (кликните чтобы раскрыть)

function closeModal(){
    var modal = $('div.modal:visible');
    if (modal) {
        var method = modal.data("method") || "fade",
            classIn = method+"In",
            classOut = method+"Out",
            animTime = modal.data("amination-time") || 500;

        modal.removeClass(classIn).addClass(classOut)
        setTimeout(function() { modal.modal('hide').removeClass(classOut).addClass(classIn); }, animTime);
    }
}
$(document).on('click', 'div.modal-dialog button.close, div.modal-dialog button.btn-close', function() {
    closeModal();
});
$(document).on('keyup', function(e) {
    if (e.which == 27) {
        closeModal();
    }
});

^* У вас должен быть подключен jQuery.

Пример для slideDown анимации

// Длительность анимации указываем 1000, как указано в css файле для данной анимации
<div class="modal slideDownIn" id="test-modal" ... data-method="slideDown" data-amination-time="1000">

Поясню, зачем нужно указывать в диве длительность анимации. Дело в том, что не каждое свойство css можно анимировать. Например, display нельзя. А Bootstrap использует именно его для отображения и скрытия модальных окон. Поэтому при закрытии окна анимация работать не будет. Для того, чтобы это обойти, я использую функцию setTimeout(), которая закрывает модальное окно по окончании анимации, длительность которой мы и передаем в диве.

В принципе можно использовать вот этот плагин для jQuery, который основан на событии "transitionend". Он позволяет запускать код по окончании анимации. Но мне было проще использовать всего одну функцию setTimeout() с одной строчкой кода в ней и указать время в диве.

Комментарии ()

Вы должны авторизоваться, чтобы оставлять комментарии.