Задать вопрос
@stevekon
javascript

Как убрать срыв transform анимации при срабатывании removeClass?

Залил пример на jsfiddle: https://jsfiddle.net/hwp1k3y7/

Суть в чем: блок с надписью "картинка" принимает класс через addClass ".sink" (в css в самом низу!!) при наведении и, соответственно, теряет его при removeClass. Проблема в том, что анимация в момент убирания мыши обрывается - не возвращается плавно на место блок "картинка". Нижний блок с другой 3d анимацией все делает правильно.

Использовал jQuery, т.к. надо, чтобы .sink получал именно блок с картинкой при наведении на весь родитель-ссылку.

Подскажите, уважаемые. пожалуйста, что не так в .sink свойствах, что не дает блоку с ним плавно завершить анимацию, как это делает нижний блок...
  • Вопрос задан
  • 557 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@Donkarleons
Добавь к классу .terr_img :
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;

должно получиться:
.terr_img {
    color: #ffffff;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка VST-плагина
19 апр. 2024, в 20:43
20000 руб./за проект
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Разработать несистемный алерт
19 апр. 2024, в 20:11
500 руб./за проект
Ещё заказы