проблема с transition

[mixtape]

хочу реализовать анимацию через css transition, но, к сожалению, элемент не анимируется. все передаваемые свойства в объекте opts верны. причём интересная штука: если для finish задать небольшой таймаут, около 10 мс, то всё отлично работает. такое ощущение, что он неуспевает изменять свойства в DOMе, или изменяет в другой последовательности, не в той, в которой директивы указаны в коде. вариант с таймаутом кажется топорным. из-за чего это происходит? и можно это как-то адекватно разрулить?

if(propertyIsSupported("transition")) {
      opts.obj.style.transitionProperty = opts.property;
      opts.obj.style.transitionDelay = opts.delay + "ms";
      opts.obj.style.transitionTimingFunction = "linear";
      opts.obj.style.transitionDuration = opts.duration + "ms";
      opts.obj.style[opts.property] = opts.start + "px";
      opts.obj.style[opts.property] = opts.finish + "px";
    }

[Sweet]

Это оптимизация браузера. Ты когда css-стили накатываешь, они накапливаются, а применяются по окончанию js-функции. Поэтому нужно вызвать событие пересчёта значений css. Например, можно "дёрнуть" геттер .clientWidth:

<div style="position: relative;">test</div>
<script>

var opts = {
	obj: document.querySelector("div"),
	property: "top",
	delay: 0,
	duration: 1000,
	start: 0,
	finish: 200

}

opts.obj.style.transitionProperty = opts.property;
opts.obj.style.transitionDelay = opts.delay + "ms";
opts.obj.style.transitionTimingFunction = "linear";
opts.obj.style.transitionDuration = opts.duration + "ms";
opts.obj.style[opts.property] = opts.start + "px";
opts.obj.clientWidth;
opts.obj.style[opts.property] = opts.finish + "px";

</script>

[MallSerg]

Если не секрет что мешает задавать стили не в JavaScript а в CSS а на JavaScript просто изменять классы у элемента?

[mixtape]

Sweet, спасибо.
MallSerg, да не секрет. анимация нужна для hide, show.
во-первых, у height может быть значение auto, явно или неявно заданное, с которым присвоение класса не сработает. а здесь я гарантированно вычисляю высоту средствами js и инлайново присваиваю. кроме того, после анимации она убирается, оставляя в инлайнах только display.
во-вторых, после анимации нужно парсить display с нужным значением. если на hide всё очевидно, то на show определяется нужное значение. придётся создавать в css каждый класс на все случаи, а если завтра выйдет новое значение display, то придётся сново класс добавлять.
в-третьих, каскадность. может для элемента задан высокоприоритетный класс (например, через id), в котором display:block, тогда в классах должен быть !important.
если бы требовалось чисто с анимировать, то так бы и поступил, но здесь немного другая ситуация.

[kostyanet]

Анимация неопределенной высоты и ширины относительно толерантно реализуется через анимацию min-width/min-height. В смысле через дефиниции CSS. Решение ограничено диапазоном возможных вариантов минимумов. Если скажем это 0 тире 500 - все шиколадно, а если 0 - 2000 - то будут лаги. Потому что транзишн шарашит на всем заданном протяжении.

[utb]

Используйте css:

.div {
top:0;
bla: bla;
}
.added {
top: 200px;
transition: top 3s linear;
}

и js (показываю на примере jquery):

$('.class').addClass('added');

Можно или даже нужно использовать css свойство animation. Зависит, что вы хотите сделать

[kostyanet]

Я делал меню-гармошку неканонично - расширял ul по щелчку на li. Получалось все просто и красиво. Но именно из-за того что я не знаю сколько там в ul находится дочерних li, вычитал про способ через min-height. В CSS стало быть задается min-height:0 и min-height:600px. По 20 пикселов на item это 30 штук - пока хватает. Проверял и на 1000 и на 2000 - на 2000 уже заметны лаги. Потому что браузер считает до 2000, а по событию отсутствия переполнения расширение останавливается, а он все равно еще считает - анимация лагает.