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

Решение проблемы с анимацией preact, react

В продолжение предыдущего поста “Баг с анимацией в списке“. Проблема была с тем, что не были указаны ключи для элементов в списке. Preact на это не ругается, а просто перестает работать адекватно, react же начинает писать предупреждения в консоли и всячески привлекать внимание. Тут однозначно 1:0 в пользу старшего брата.

Однако, только добавив ключи проблема не исчезла. Она только приобрела другой оттенок. Сейчас покажу нагляднее. Обратите внимание на анимацию ниже. Заметьте, что как только я нажимаю в первый раз на элемент, то зачеркивание появляется мгновенно, и только потом начинает появляться с анимацией. Очень неприятная особенность. Уточню, что первый пример написан на preact’е.

preact-key-bug

Как я понимаю это связанно с тем, что при первом проходе preact еще не привязывается к ключам, а начинает их замечать только потом. С чем это связанно я без понятия. Вполне возможно, что и проблема не совсем в этом, но какого-то более адекватного объяснения я не нашел, а залезать с отверткой в исходный код мне не хотелось.

Поэтому я просто заменил фреймворк на react и все сразу начало работать. Обратите внимание, что анимация работает всегда:

react-key

Собственно именно этого мне и хотелось добиться. Так что я preact’ом я пока закончил эксперименты, будем продолжать работать со старшим братом 🙂

Кстати, если кому интересно, то код этого проекта есть у меня в гитхабе: https://github.com/artemdemo/todo-smooth. Если кому интересно, то велкам.

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