Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/thewind/data/www/dignatiev.ru/app/Model/Local.php on line 39
Возврат на исходную позицию css:transition - Блог на сайте DIgnatiev development

Возврат на исходную позицию css:transition

1. Проблематика

При использовании css свойства transition с относительно долгим duration и последующей относительно быстрой сменой состояний mouseover / mouseout (навели / убрали мышь) свойство перестает корректно отрабатывать (например, начинается с середины).

Это имеет значение, когда рядом находятся несколько одинаковых по структуре блоков (например, фото-блоки с эффектами при наведении).

Обычный CSS код в таких ситуациях выглядит следующим образом:

div {
    margin-top: 0;
    transition: margin-top 2s;
}
div:hover {
    margin-top: 50px;
}

Пример: https://jsfiddle.net/thewind/kn4f7nne/ - если водить мышкой между блоками довольно быстро, то видно, что анимация не успевает вернуться на исходную позицию.

2. Задача

Сделать так, чтобы какой бы быстрой ни была смена состояний mouseover / mouseout, свойство отрабатывало корректно - с исходной позиции в конечную.

3. Решение

Для исходного состояния прописывать css transition со свойством duration = 0, а для состояния hover прописывать нужный duration. В этом случае анимация будет корректно отрабатывать в момент события mouseover, а для события mouseout свойство transition-duration будет равно 0, поэтому сразу же вернет состояние стилей в начальное состояние.

div {
    margin-top: 0;
    transition: margin-top 0;
}
div:hover {
    margin-top: 50px;
    transition: margin-top 2s;
}

Пример: https://jsfiddle.net/thewind/kn4f7nne/1/

4. Замечания

Решение работает только в том случае, если возврат стилей в исходное состояние производится без анимации. В случае с требованием применять анимацию в обоих направлениях, необходимо использовать код JS или сторонние плагины для воспроизведения анимированных переходов.


contact

Свяжитесь с нами

Если вам понравились наши услуги или появились вопросы, напишите через обратную связь.

Новости

05 июля 2017 г.

Два новых сервиса в онлайне.

Подробнее »

17 июня 2016 г.

Новая статья в нашем блоге про актуальность адаптивного дизайна в современных сайтах.

Подробнее »

Отзывы клиентов

Всё отлично, быстро и недорого!

Владимир Ульев - В-Кран

Работы по сайту были сделаны качественно. Понравилось то, что в студии выполнили все обязательства в срок.

Оцениваю сотрудников как профессионалов высокого уровня, приятных в общении людей и рекомендую!

Антон Яковлев - Играмир

bottom