Как анимировать этот элемент?

Question

[Дмитрий]

Есть вот такой бургер

Как сделать так, что бы при клике на бургер, сначала появлялся треугольник (желательно плавно), а только потом само меню. Я думал сделать через setTimeout, но может есть какое-то решение получше?

Answer 1

[Дмитрий]

Чот так никто и не помог. В итоге сотворил вот такое. Контейнер с overflow: hidden и изменяющейся высотой по клику.

Answer 2

[Сергей Веблайф]

Так, а как насчет css анимации?) Там же все это можно сделать легко и просто )

Comments

[Дмитрий]

Ну вот я хз как)
Делать отдельную анимацию через keyframe?
Или с transition что-то
Алгоритм действий в голову чот вообще не приходит

[Сергей Веблайф]

Дмитрий: через keyframe пропиши саму анимацию как действовать должна, а через transition уже в самом основном классе пропиши, скорость задержку и т.д.

[Дмитрий]

Сергей Веблайф: ну это ведь получается нужно две разные анимации создавать
От 0 до 100, и от 100 до 0
Или нет?

[Сергей Веблайф]

Дмитрий: на сколько я помню по дефолту оно должно дать обратный эффект когда идет отклик.. но похоже ты прав скорее всего надо две анимации делать.. я просто делал давненько могу попробовать сделать, но я как понял ты и сам то умеешь ;)

Answer 3

[Mike Khromov]

Не стоит использовать скрипт там где он ненужен. Подготовте спрайт (несколько картинок в одной), вставте его как фон к иконке и при помощи css по hover меняйте положение фона через анимацию.