Возможно, вы видели много примеров с переходами на макете, как этот здесь.
Анимации макета, такие как они были обычными в нативных приложениях в течение многих лет, но это уже труднее реализовать их в веб-приложениях, потому что нужно обслуживать несколько размеров экрана. Переходное движение было впервые продвижено Google, чтобы помочь разработчикам построить более интуитивные потоки пользователя в их приложениях. Материал .io Это отличный ресурс, чтобы узнать о своих принципах проектирования в мобильных приложениях.
Недавно Фреймер вышел с Framer-Motion V2 который включает Animatesharedlayout Что я считаю, является самым простым выходом, чтобы построить анимацию переходной макеты. Вот мой гид о том, как добиться этого.
Во-первых, вы можете начать с создания макетов, поскольку они должны смотреть, используя HTML и CSS или любую библиотеку стилей из ваших предпочтений.
Затем добавьте движение. к метку элемента, который вы хотите анимировать, например Div становится Motion.div , H1 к Motion.h1. И так далее, движение Поддерживает все теги HTML. Затем добавьте атрибут маяк . Убедитесь, что эти лайуэтки уникальны на обоих страницах.
Как только вы закончите с этим, оберните маршруты, на которые вы хотите реализовать переход макета с помощью Animatesharedlayout Отказ
И это так же легко, как это. Ваше приложение с анимацией killer Layout выполняется 🎉
Вы можете обратиться к этому потрясающему примеру в кодовой коробке ниже, который был предоставлен Framer-Motion команда.
Я начал использовать его в моих проектах.
Проверьте эту API и поделитесь этим со мной в Twitter.
Оригинал: “https://dev.to/utkarshbhimte/intro-to-animatesharedlayout-from-framer-motion-v2-2-5g0e”