Javascript 帧运动转换时：'；未成年子女'；和'；在儿童之前'；工作不正常

我使用样式化组件和帧运动设置了以下动画：

import styled from 'styled-components';
import { motion } from 'framer-motion';

const sidebarVariants = {
  collapsed: {
    width: '55px',
    transition: {
      when: 'afterChildren',
    },
  },
  expanded: {
    width: '220px',
    transition: {
      when: 'beforeChildren',
      staggerChildren: 0.1,
    },
  },
};

export const SidebarContainer = styled(motion.div).attrs(() => ({
  initial: 'expanded',
  variants: sidebarVariants,
}))`
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  background-color: #2980b9;
  color: #ecf0f1;
  align-items: space-between;
  line-height: 1.25em;
  a {
    width: 100%;
    color: #ecf0f1;
    text-decoration: none;
  }
`;

export const textVariants = {
  hidden: { opacity: 0 },
  shown: { opacity: 1 },
};

export const HidingText = styled(motion.div).attrs(() => ({
  initial: 'shown',
  variants: textVariants,
}))`
  margin-left: calc(22px + 1em);
  position: absolute;
`;

我在侧边栏组件中以以下方式使用：

import React from 'react';

import { Link, useLocation } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faCloudUploadAlt,
  faChevronLeft,
  faChevronRight,
  faUsers,
  faTachometerAlt,
} from '@fortawesome/free-solid-svg-icons';

import {
  Brand,
  BrandMenuItem,
  CollapseContainer,
  CollapseText,
  HidingText,
  MainMenuText,
  MenuContainer,
  MenuItem,
  SidebarContainer,
} from './Sidebar.styles';

import brandIcon from './assets/brand.svg';

export default ({ isCollapsed, setIsCollapsed }) => {
  const { pathname } = useLocation();

  const isLinkActive = (linkPathnames) => {
    const isActive = linkPathnames.reduce((acc, currValue) => {
      if (pathname === currValue) {
        return true;
      }
      return acc;
    }, false);

    return isActive;
  };

  return (
    <SidebarContainer animate={isCollapsed ? 'collapsed' : 'expanded'}>
      <Link to="/projects">
        <BrandMenuItem active={isLinkActive(['/projects'])} highlighted={isLinkActive(['/projects'])}>
          <Brand src={brandIcon} alt="projects screen" />
        </BrandMenuItem>
      </Link>
      <MenuContainer>
        <Link to="/projects/create">
          <MenuItem
            active={isLinkActive(['/projects/create'])}
            highlighted={isLinkActive(['/projects/create'])}
          >
            <MainMenuText>
              <FontAwesomeIcon icon={faCloudUploadAlt} />
              <HidingText animate={isCollapsed ? 'hidden' : 'shown'}>New project</HidingText>
            </MainMenuText>
          </MenuItem>
        </Link>
        <Link to="/userManagement">
          <MenuItem
            active={isLinkActive(['/userManagement'])}
            highlighted={isLinkActive(['/userManagement', '/userManagement/users', '/userManagement/teams'])}
          >
            <MainMenuText isCollapsed={isCollapsed}>
              <FontAwesomeIcon icon={faUsers} />

              <HidingText animate={isCollapsed ? 'hidden' : 'shown'}>User management</HidingText>
            </MainMenuText>
          </MenuItem>
        </Link>

        <Link to="/admin/dashboard">
          <MenuItem
            active={isLinkActive(['/admin/dashboard'])}
            highlighted={isLinkActive([
              '/admin/dashboard',
              '/admin/users',
              '/admin/projects',
              '/admin/uploader',
              '/admin/settings',
            ])}
          >
            <MainMenuText>
              <FontAwesomeIcon icon={faTachometerAlt} />
              <HidingText animate={isCollapsed ? 'hidden' : 'shown'}>Admin panel</HidingText>
            </MainMenuText>
          </MenuItem>
        </Link>
      </MenuContainer>
      <CollapseContainer isCollapsed={isCollapsed} onClick={() => setIsCollapsed(!isCollapsed)}>
        <HidingText animate={isCollapsed ? 'hidden' : 'shown'}>
          <CollapseText>Collapse sidebar</CollapseText>
        </HidingText>
        <FontAwesomeIcon icon={isCollapsed ? faChevronRight : faChevronLeft} />
      </CollapseContainer>
    </SidebarContainer>
  );
};

从“React”导入React；
从'react router dom'导入{Link，useLocation}；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
进口{
faCloudUploadAlt，
法切夫隆左，
法切夫隆对，
浮士德，
法塔克美拉特，
}来自“@fortwome/free solid svg icons”；
进口{
品牌，
BrandMenuItem，
CollapseContainer，
CollapseText，
隐藏文本，
MainMenuText，
MenuContainer，
MenuItem，
侧边栏，
}来自“./Sidebar.styles”；
从“/assets/brand.svg”导入brandIcon；
导出默认值（{isCollapsed，setIsCollapsed}）=>{
const{pathname}=useLocation（）；
常量IsLink活动=（链接路径名）=>{
const isActive=linkPathnames.reduce（（acc，currValue）=>{
if（路径名===currValue）{
返回true；
}
返回acc；
}，假）；
回报是积极的；
};
返回(
新项目
用户管理
管理面板
setIsCollapsed（！isCollapsed）}>
折叠边栏
);
};

我希望

HidingText

组件在我的

SidebarContainer

完全展开后出现，并在我的

SidebarContainer

触发折叠动画之前消失

现在发生的是两个动画同时触发

我做错了什么