Клуб API Карт

Как использовать CSS анимацию?

samsoldatenko
12 ноября 2014, 16:57

Есть фрагмент html который хочу испльзовать в качестве placemark. 

<div class="my_mark"><svg class="bubble".... </div>

  Размер элемента изменяется через css transition 

.bubble {
    margin-top: 0;
    margin-left: 0;
    transition: width 200ms, height 200ms, margin-top 200ms, margin-left 200ms;
}

Чтобы менять css класс у placemark я вставил в шаблон выражение: 

<div class="my_mark {{ properties.extra_css_class }}">...

Анимация на карте не работает.

Размер меняется не плавно, как ожидалось, а скачком.

Вот здесь код: http://jsfiddle.net/kc4y0dvd/1/

Можно исправить?

2 комментария

При изменении ключа, использующегося в шаблоне {{ properties.extra_css_class }}, шаблон перестраивается.

Потоэму и не работает. Надо менять класс через методы шаблона.

Ну и в целом лучше использовать jQuery вместо onclick и не использовать глобальных переменных

Сделал пример

http://jsbin.com/zazikerusu/1/

 

Спасибо.