transform динамически созданного элемента

[Sizz Lorr]

Немного закипел, перепробовал несколько вариантов, но зараза все уходят в одном направлении, динамически созданный div не принимает transform сразу
Javascript

var imgSute=document.createElement("div"); //Сам элемент для transform
$(imgSute).css({transform: "rotateX(-90deg) perspective(800px)"}).addClass("article_image").append(domImage); //Цепляем изображение внутрь, создается ранее
$(elementToSlide).find("div.image_sute").append(imgSute); //Цепляем к необходимому родителю

CSS

div.article_image
{
    width: 100%; height: 130px; overflow: hidden; position: absolute; top: 0; left: 0; transform-style: preserve-3d; transform-origin: bottom; transition: all 1s cubic-bezier(0, 0, 0, .5); transform: rotateX(0) perspective(800px);
}

Затем работает функция изменяющая transform (ее вырезка)

$(obj).find("div.article_image:first").css({transform: "rotateX(90deg) perspective(800px)"});
$(obj).find("div.article_image:last").css({transform: "rotateX(0deg) perspective(800px)"});

Смысл - старый элемент "падает" назад, новый поднимается вертикально
Затем старый элемент удаляется, ну и т.д.

Сама проблема:
Если не поставить паузу перед изменением трансформации элемент появляется на странице уже в окончательном виде. Старый же элемент трансформируется нормально.
При паузе на начале трансформации - все ОК и крутится как надо.

Голову уже себе сломал - сделал подстановкой классов, та же фишка, созданный элемент оказывается на странице в конечной позиции. Может глаза замылились и просто не вижу элементарного?

[Deff]

Sizz Lorr,
Можа это ? http://htmlbook.ru/css/transition (добавлять к стилю исходного элемента до преобразования, тогда процесс преобразования анимируется с учетом времени анимации в transition

[Sizz Lorr]

Sizz Lorr,
Можа это ? http://htmlbook.ru/css/transition

это кусочек интерфейса под динамическую менюшку win8-10 , чтобы было понятнее что делается ))))

Нет, тут ошибка какая то очень уже специфическая, связанная с таймингом вывода созданных элементов. Ощущение, что transition не успевает прописаться в элемент.

Проверил элементарно - все выводится с нужным углом поворота, если сразу после присоединения элемента выйти из функции через return false;

[Deff]

Sizz Lorr,
transition уже должно приписано в файле стиля или теге <style> ко всем селекторам исходных элементов до всех преобразований
А не добавлять transition на этапе преобразования

[Sizz Lorr]

В том то и дело, что пробовал, второй день сижу над парой простых строк )))) - сейчас код выглядит так

div.article_image_new
{
    width: 100%; height: 130px; overflow: hidden; position: absolute; top: 0; left: 0; transform-style: preserve-3d; transform-origin: bottom; transition: all 1s cubic-bezier(0, 0, 0, .5); transform: rotateX(-90deg) perspective(800px);

...

$(imgSute).addClass("article_image_new").append(domImage);

и после меняется класс объекта ... результат аналогичен ...

[Deff]

Дайте ссылку на демо страницу

[Sizz Lorr]

TRANSITION ERROR - вот временно выложил критичный элемент. Чтобы поведение было более понятным - изменил вращение, чтобы его было видно. Если поставить паузу в строке 87, а потом продолжить, то видно, как должно быть вращение, иначе то, что видите ...
Да, не проверял ни под чем кроме вебкита ... это только первые шаги в данной цэмэске ...

[Deff]

К ночи гляну, убегаю...

[Sizz Lorr]

Что то читал форум и проскочила идея Кэша ... onload ...

10 минут позже:

... да уж ...

var img = new Image();
    img.src="./galery/"+newImage;
    img.onload=createElementsToSlide;

не помогло ....

[Boris_V]

Чтобы 100% сработала анимация лучше использовать animation, а в этом случае применять изменение стиля через timeout(func, 0)