CSSTransitions не запускаются после сборки. (Gatsby)

#animation #gatsby #reactcsstransitiongroup #emotion

#Анимация #gatsby #reactcsstransitiongroup #эмоции

Вопрос:

Анимации с CSSTransition из компонентов в стиле «react-tranisiton-group» и «emotion» не запускаются после сборки. Как всегда! Если я автоматически добавлю отступ в код с помощью редактора кода в соответствующем HTML-файле, все снова будет работать идеально.

Есть ли способ не уменьшать HTML-файлы во время сборки? Кому-нибудь это кажется знакомым?

Комментарии:

1. Эта проблема как-то связана с тем, как браузер анализирует html-теги. После того, как я добавлю хотя бы один пробел после первого тега </style> и следующего тега <div> , все снова заработает.

Ответ №1:

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

на самом деле необходимо добавить пробел до и после тегов стиля

Это то, что запускается после сборки.

 sed -i -e 's/'"</style>"'/'"</style> "'/g' $(find ./public -name *.html) amp;amp; sed -i -e 's/'"<style"'/'" <style"'/g' $(find ./public -name *.html)
  

он находит все HTML-файлы в общей папке и добавляет пробелы перед тегами стиля и после них.
Операция замены выполняется дважды! Один для пробела до, а другой для пробела после. Это не оптимально и для большого количества html-файлов может занять некоторое время … .
ГОТОВО!