Как отказаться от таймера?

Question

[Ярослав Иванов]

Есть библиотека. В нем метод .show() показывает найденые элементы так же как и в jQuery. Если передавать аргументы (числа) то появление будет анимироваться.

Анимация работает путем добавление на элемент transition и transform: scale();

Суть вопроса в том, что если я укажу значение scale(0) а потом scale(1) то я ожидаю, что будет плавный переход между состояниями но на деле элемент показывается сразу со значением scale(1). Браузер словно не успевает.

Если обернуть строчку со scale(1) в setTimeout с интервалом 10 то сработает как надо но выглядит это жутко.
Так работает

$this.elements.style.transform = "scale(0)";
setTimeout(function() {
	$this.elements.style.transform = "scale(1)";
},10)

А так нет

$this.elements.style.transform = "scale(0)";
$this.elements.style.transform = "scale(1)";

Попробовать саму библиотеку можно тут
jsfiddle.net/space2pacman/82y3zkc0

doc.find(".class") // найти элемент
.show() .hide() // показать/спрятать
.show(1000) .hide(1000) // показать/спрятать с анимацией

Answer 1

[0xD34F]

$this.elements.style.transform = "scale(0)";
$this.elements.style.transform = "scale(1)";

Вставьте между этими строками $this.elements.offsetTop;, например (ага, просто обращение к свойству, ничего более) - будет работать как вы хотите. М-м-магия? Никак нет. Рекомендую к прочтению.

Comments

[Ярослав Иванов]

Костыль какой-то) но попробую

[Ярослав Иванов]

https://m.youtube.com/watch?v=cCOL7MC4Pl0

Посмотрел это видео и вспомнил про свой вопрос)

Answer 2

[Владимир]

https://caniuse.com/#search=transitionend
https://developer.mozilla.org/ru/docs/Web/Events/t...

Comments

[Ярослав Иванов]

Это не то)