Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

Баг с анимацией в списке – preact

Обнаружилась достаточно интересная сложность в работе с анимацией в preact (вполне возможно, что она относится и к реакту, я пока не тестировал). Все связанно с тем, что фреймворк хочет по-максимому реиспользовать элементы DOM’а и старается где можно (с его точки зрения) просто менять текст, а не удалять ноды.

Все бы ничего, но такой подход начинает буксовать, когда в списке элементов используется анимация. Анимация никак с удалением не связанна, она вообще про другое, вместе с тем наблюдается вот такой эффект – обратите внимание на gif ниже:

preact-animation-bug

Как я понимаю – проблема как раз в том, что фреймворк сначала переставляет местами текст и классы, а потому удаляет элементы из DOM’а. В итоге анимация и начинает работать – потому что классы же появились и исчезли. Есть несколько идей, как это решить, но пока не все протестировал.

Продолжение следует.

Поделиться:
comments powered by Disqus