Вы когда-нибудь работали над проектом и вдруг осознали, что все не так? Вы не можете продолжать работу с результатами или наращивать функциональность. Вы слишком взволнованы непреодолимым чувством, что это неправильно. Как вы могли двигаться дальше, когда не хватает чего-то столь важного?

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

Моей задачей было создать поисковик покемонов, в котором пользователь мог бы нажимать на покемона, чтобы переключаться между отображением передних и задних изображений, искать покемонов по имени и создавать покемонов для добавления в индекс. Первым результатом была возможность переключаться между передним и задним спрайтами. Это было довольно просто. Мне просто нужно было создать состояние в PokemonCard под названием «front», которое инициализируется как истинное, а затем просто обрабатывать, какой спрайт показывать с помощью троичного элемента на основе этого состояния.

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

Я думал, что, поскольку у Semantic UI React есть такая хорошая документация и целый раздел о переходах, я найду ответ максимум за полчаса. Потребовалось как минимум втрое больше. Я нашел раздел переходов на веб-сайте Semantic UI React и быстро нашел то, что искал: горизонтальный флип. Пример, который у них есть на сайте, - это переключение одного листа между присутствием на странице и отсутствием.

Чтобы заставить семантический переход работать, нужно обернуть все, что вы хотите, чтобы переход присутствовал в компоненте ‹Transition›. Этот тег может принимать множество свойств, но единственные необходимые для анимации, которую я хотел, это visible = boolean, animation = ’one of their options’ и duration = milliseconds. Видимая опора - это то, что контролирует, является ли содержимое в переходе (как вы уже догадались) видимым или нет. Это самая важная опора, с которой нужно иметь дело.

Я решил добавить опору видимости к каждому тегу PokemonImage в функции рендеринга PokemonCard. Затем это будет передано в опору видимости для перехода. При этом на странице ничего не изменилось. Переход не показывался. Сначала я подумал, что что-то не так с тем, как я использую компонент Transition, поэтому я потратил около двух часов, пытаясь отладить его и перечитать документацию по переходам Semantic React.

Я пробовал все, и одной из последних вещей, которые я пробовал, было удаление тройки в функции рендеринга PokemonCard для PokemonImages. Это решило некоторые проблемы и технически дало мне возможность перехода, но все равно это было не то, что я хотел. В итоге это выглядело так:

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

Чтобы решить эту проблему, я просто обратился к css. Я добавил класс «image-container» к div, под которым живут оба спрайта, и редактировал CSS непосредственно этого и самих изображений, чтобы они накладывались друг на друга и оставались на месте. Я также добавил CSS, который позволил мне изменять размер экрана и изменять размер спрайтов в зависимости от их карт-контейнеров.

Наконец-то я получил желаемый переход. Примерно через 3 или 4 часа отладки, угадывания, перечитывания и пробного использования различных свойств css я получил анимацию, на которую надеялся. После этого я завершил остальную часть проекта менее чем за час. Мои приоритеты могут нуждаться в доработке.