Анимация Gatsby-plugin-transition-link влияет на элемент заголовка TransitionPortal - PullRequest
Новая
       8

Анимация Gatsby-plugin-transition-link влияет на элемент заголовка TransitionPortal

0 голосов
/ 26 февраля 2020

Я знаю, что это может быть глупый вопрос. Дело в том, что я недостаточно опытен с Гэтсби. js и реагирую. js. Поэтому я не вижу решения.

У меня есть сайт на netlify, использующий gatsby-plugin-transition-link для анимации страницы / слайда меняется. Дело в том, что у меня есть меню заголовка, которое хранится там с <TransitionPortal>, как это предлагается в документации, но заголовок остается «замененным», как вы можете видеть по ссылке - по крайней мере, в firefox и chrome. Я не уверен, почему это происходит. Одна вещь, которую я замечаю, это то, что каждый раз, когда я нажимаю на ссылку, анимация «скремблирования» начинается в lo go. Это, кажется, показывает, что это новый заголовок, загружаемый в каждом запросе страницы. Вот как это должно работать?

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

Я не уверен, какими частями кода было бы интересно поделиться, поэтому я вставляю очевидное для себя. Я буду редактировать этот вопрос с любым запросом, который у вас есть, ребята.

Вот макет . js file: 

import React, { useRef } from 'react';
import Footer from './Footer';
import Header from './Header';
import { TransitionPortal } from 'gatsby-plugin-transition-link';

const Layout = ({ children, id, footerPlacement, itemsAlignment, mainHeight }) => {
  const placements = {
    fixed: `lg:fixed`,
    loose: ` `
  }

  const aligments = {
    center: `items-center`,
    none: ` `
  }

  const mHeights = {
    auto: `md:h-auto`,
    screen: `md:h-screen`
  }


  return (
    <>
      <div className="w-full lg:h-auto bg-white">
        <TransitionPortal>
          <Header className="" />
        </TransitionPortal>
        <main className={`text-gray-900 flex 
        ${mHeights[mainHeight] || mHeights.screen}
        ${aligments[itemsAlignment] || aligments.center}`}>
          <section id={id} 
            className="w-full h-auto">
            {children}
          </section>
        </main>
        <Footer placement={`
          ${placements[footerPlacement] || placements.fixed}
        `} />
      </div>




    </>
  );
};

export default Layout;

Header. js - Компонент в этом является простым обходным путем, поэтому у меня не было бы кода, раздутого с классами для каждого компонента AniLink. Он читает указания, верх и параметры. 

import React from 'react'
import ALink from '../aLink'
import { Scrambler, Cycler } from 'react-text-scrambler'

const Header = ( ) => {
  const strings = [ "E Direito", "É Direito" ];
  const characters = [ "&", "*", "$", "#", "$", ">", "<", "_", "+", "@", ]
  const BlueText = props => (
    <span class="text-criptoBlue-600">{ props.children }</span>
  );
  const BlackText = props => (
    <span class="text-black">{ props.children }</span>
  );

  return (
    <header class="bg-white border-b-2 border-criptoOrange-600 fixed top-0 w-screen">
      <div className="container mx-auto lg:px-3 xl:px-0 px-6 bg-white flex flex-wrap items-center lg:pt-3 lg:pb-0 py-3" >
        <div class="flex-1 flex justify-between items-center">
          <a href="" className={`text-sm md:text-xl lg:text-3xl lg:pb-2 title hover:text-criptoBlue-500`}>
            <Scrambler text="Criptografia " characters={ characters } />
            <Cycler 
              duration={ 4000 }
              strings={ strings }
              characters={ characters }
              wrap={ BlueText }
            />

          </a>
        </div>

        <label for="menu-toggle" class="pointer-cursor lg:hidden block text-gray-800 hover:text-criptoOrange-600">
          <svg class="fill-current text-gray-900" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
            <title>menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </label>
      <input class="hidden" type="checkbox" id="menu-toggle" />

      <div class="hidden lg:flex lg:items-end lg:w-auto w-full" id="menu">
        <nav className="">
          <ul class="lg:flex items-center justify-between text-sm lg:text-lg text-gray-700 hover:text-white pt-4 lg:pt-0">
          <li>
            <ALink to="" style="swipe" top="entry">Sobre</ALink>
          </li>
          <li>
            <ALink to="acompanhamento" style="swipe" top="entry">Plataforma</ALink>
          </li>
          <li>
            <ALink to="blogindex" style="swipe" top="">Blog</ALink>
          </li>
          <li>
            <ALink to="contato" style="swipe" top="entry">Contato</ALink>
          </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  )
}

export default Header

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

...