Блог

Я использую framer-motion для анимации объектов.

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

Я сталкиваюсь с сбоем, когда кнопка анимации больше не будет доступна для просмотра.

Приложение React

     <>
      <StyledTechNav>
        <MdKeyboardArrowLeft
          title="left-arrow"
          size={size === 'mobile' ? '1.5rem' : '2rem'}
          onClick={decrementIndex}
        />
        <StyledSubject
         initial={{ scale: 0 }}
         animate={{ scale: 1.5 }}
         transition={{
           delay: 0.5,
           duration: 1,
         }}
        >
          {options[index]}
        </StyledSubject>
        <MdKeyboardArrowRight
          title="right-arrow"
          size={size === 'mobile' ? '1.5rem' : '2rem'}
          onClick={incrementIndex}
        />
      </StyledTechNav>
      <StyledTechstack></StyledTechstack>

 

Стилизованный компонент

 const StyledTechNav = styled.div`
  ${({ theme }) => {
    return css`
      display: flex;
      justify-self: center;
      align-self: center;
      font-size: ${theme.fonts.size[3]};
      color: ${theme.colors.gray};
      padding: 1rem;

      svg {
        cursor: pointer;
        padding-bottom: 0.25rem;
      }
    `;
  }}
`;

const StyledSubject = styled(motion.h2)`
  ${({ theme }) => {
    return css`
      width: 160px;
      text-align: center;
      ${theme.device.mobile} {
        font-size ${theme.fonts.size[1]};
      }
    `;
  }}
`;
 

Я бы добавил анимацию к кнопкам с помощью

pointer event: none; cursor: defau< и другие стили, которые вы хотите, 0% а затем pointer event: all; cursor: pointer 100% , и чтобы эта DisableButton анимация имела ту же продолжительность и задержку, что и ваша другая анимация. Удачи!