я уже придумал
и
transition-property: all;, мне кажется, не годится
мы ведь не всё анимируем, а только указанное свойство?
ну да ладно
конец анимации можно отловить по событию
transitionend. так написано на мозилла док центре ( ссылка в посте сверху )
у меня примерно так же все делается, за исключением предписания классов
код сам добавляет класс, где прописано конечное значение.
еще добавляет в тег style правила для указанного элемента.. правила перехода ( transition )
потом удаляет
...
там 2 проблемки... первая в мозилле : если не указать начальное значение, перехода не будет
т.е. , при таком коде
img { -moz-transition : height 1s linear; }
img.animate { height : 660px; }
если не задана высота картинки, она не будет анимироваться.
вторая проблема в хроме. там просто не удаляются правила ):
...
.......
я спрашивал про реализацию всего этого без прикосновений к тегу style
типа
// высота меняется мгновенно
element.style.height = "200px";
element.style.transitionProperty = "height";
element.style.transitionTime = "2s";
element.style.timingFunction = "linear";
// а вот после этой строчки будет анимироваться
element.style.height = "660px";