Как сверстать анимацию стрелки при открытии аккордеона?

Question

[maralov]

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

Answer 1

[Фёдор]

Пишите в css свойства для анимации, её стили и через JS вешаете стили на событие.

Comments

[maralov]

на свг при клике вешаю класс, который анимирует path стрелки в svg?

а как привязать саму свг к кругу и блоку с диаграммами? если блок там где описание Фаз станет больше контента его высота измениться же...

[Фёдор]

maralov, Да, Вам надо обратить внимание на такую тему как "анимация контуров SVG-фигур. Эффект “рисования” c помощью stroke-dasharray и stroke-dashoffset.

Привязать через position: absolute и задавать расстояние в % соотношении от высоты родительского блока. (Тут могу ошибаться, но должно сработать)

[maralov]

Фёдор, высота типа 100% родите + расстояние до нужно блока. спасибо! буду пробовать как с анимацией разберусь!

[Фёдор]

maralov, отпишитесь, если всё получится или если найдёте другое решение. Будет любопытно посмотреть на результа в любом случае)))