Question

库：react-anime，animejs。我想以交错的方式显示每个单词，或者以类似单词中的字母的方式显示延迟显示的单词（第一，第二等）。不知道如何准确描述它，但是当您看到在codeandbox上的动画：https://codesandbox.io/s/infallible-neumann-woygq

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import Anime from "react-anime";
import animejs from "animejs";

const StyledWrapper = styled.div`
  max-width: 400px;
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
`;

const StyledWord = styled.h1`
  font-size: 3rem;
  letter-spacing: 2px;
  font-family: "Roboto", sans-serif;
  display: flex;
  margin-right: 10px;
`;

const App = () => {
  const [text] = useState(["hello", "world", "from", "here"]);
  let animeProps = {
    easing: "easeInOutQuart",
    duration: 1400,
    delay: (el, i) => 300 + 30 * i,
    translateY: [100, 0],
    opacity: [0, 1],
    loop: true
  };

  return (
    <StyledWrapper>
      <Anime
        in
        duration={300}
        appear
        onEntering={{
          translateY: [100, 0],
          opacity: [0, 1],
          delay: animejs.stagger(60),
          easing: "linear"
        }}
      >
        {[...text].map(word => (
          <StyledWord>
            <Anime {...animeProps}>
              {[...word].map(letter => (
                <span>{letter}</span>
              ))}
            </Anime>
          </StyledWord>
        ))}
      </Anime>
    </StyledWrapper>
  );
};

export default App;

高级动漫无法正常运行，我希望它应该显示与字母类似的每个单词，

反应动漫-交错动画不起作用

0 个答案: