Всё отлично, быстро и недорого!
Владимир Ульев - В-Кран
При использовании css свойства transition с относительно долгим duration и последующей относительно быстрой сменой состояний mouseover / mouseout (навели / убрали мышь) свойство перестает корректно отрабатывать (например, начинается с середины).
Это имеет значение, когда рядом находятся несколько одинаковых по структуре блоков (например, фото-блоки с эффектами при наведении).
Обычный CSS код в таких ситуациях выглядит следующим образом:
div {
margin-top: 0;
transition: margin-top 2s;
}
div:hover {
margin-top: 50px;
}
Пример: https://jsfiddle.net/thewind/kn4f7nne/ - если водить мышкой между блоками довольно быстро, то видно, что анимация не успевает вернуться на исходную позицию.
Сделать так, чтобы какой бы быстрой ни была смена состояний mouseover / mouseout, свойство отрабатывало корректно - с исходной позиции в конечную.
Для исходного состояния прописывать 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/
Решение работает только в том случае, если возврат стилей в исходное состояние производится без анимации. В случае с требованием применять анимацию в обоих направлениях, необходимо использовать код JS или сторонние плагины для воспроизведения анимированных переходов.
Если вам понравились наши услуги или появились вопросы, напишите через обратную связь.
Новая статья в нашем блоге про актуальность адаптивного дизайна в современных сайтах.
Всё отлично, быстро и недорого!
Владимир Ульев - В-Кран
Работы по сайту были сделаны качественно. Понравилось то, что в студии выполнили все обязательства в срок.
Оцениваю сотрудников как профессионалов высокого уровня, приятных в общении людей и рекомендую!
Антон Яковлев - Играмир