z 索引和成帧器运动布局 ID 的问题

Question

我正在使用

motion.span

并将

layoutId

设置为

underline

来很好地为我的选项卡底部栏设置动画。问题是从左侧选项卡向右单击时效果很好

但是从右选项卡导航到左选项卡时它不可见，因为它隐藏在其他选项卡后面

这里是一个官方示例（经过编辑以显示问题）https://codesandbox.io/p/sandbox/framer-motion-layout-animations-forked-y75fmd?file=%2Fsrc%2Fstyles.css%3A91%2C9

我应该改变什么？

完整代码

    <Tabs
              value={activeTab}
              onValueChange={setActiveTab}
              className='mt-[100px] min-h-[300px] w-full'
            >
              <TabsList className='flex items-start '>
                <TabsTrigger
                  value='latex'
                  className='flex items-center gap-1.5'
                >
                  <Keyboard className='h-5 w-5' />
                  <span>LaTeX</span>
                  {activeTab === 'latex' && (
                    <motion.span
                      layoutId='underline'
                      className='absolute left-0 top-full -mt-[4px] block h-[3px] w-full'
                      transition={{ duration: 200 }}
                      style={{
                        background:
                          'linear-gradient(113deg, hsl(260deg 100% 64%) 0%, hsl(190deg 100% 55%) 100%)',
                        boxShadow: '0px 0px 8px 0px hsl(262deg 100% 70% / 70%)',
                      }}
                    />
                  )}
                </TabsTrigger>
                <TabsTrigger
                  value='image'
                  className='flex items-center gap-1.5'
                >
                  <ImageIcon className='h-5 w-5' />
                  <span>Zdjęcie</span>
                  {activeTab === 'image' && (
                    <motion.span
                      layoutId='underline'
                      className='absolute left-0 top-full -mt-[4px] block h-[3px] w-full'
                      transition={{ duration: 200 }}
                      style={{
                        background:
                          'linear-gradient(113deg, hsl(260deg 100% 64%) 0%, hsl(190deg 100% 55%) 100%)',
                        boxShadow: '0px 0px 8px 0px hsl(262deg 100% 70% / 70%)',
                      }}
                    />
                  )}
                </TabsTrigger>
                <TabsTrigger
                  value='video'
                  className='flex items-center gap-1.5'
                >
                  <PlaySquare className='h-5 w-5' />
                  <span>Wideo</span>
                  {activeTab === 'video' && (
                    <motion.span
                      layoutId='underline'
                      transition={{ duration: 200 }}
                      className='absolute left-0 top-full z-[100] -mt-[4px] block h-[3px] w-full'
                      style={{
                        background:
                          'linear-gradient(113deg, hsl(260deg 100% 64%) 0%, hsl(190deg 100% 55%) 100%)',
                        boxShadow: '0px 0px 8px 0px hsl(262deg 100% 70% / 70%)',
                      }}
                    />
                  )}
                </TabsTrigger>
                {/* <div
                ref={cursorRef}
                className='absolute bottom-[0px] h-[4.5px] w-[100px] transition-all duration-300'
                style={{
                  background:
                    'linear-gradient(113deg, hsl(260deg 100% 64%) 0%, hsl(190deg 100% 55%) 100%)',
                  left: '0px',
                  width: '0px',
                  boxShadow: '0px 0px 8px 0px hsl(262deg 100% 70% / 70%)',
                }}
              ></div> */}
              </TabsList>
              <div
                className='min-h-[300px] rounded-[5px] border-y border-y-[#3b3d3f] bg-[#20222c] p-5'
                style={{
                  boxShadow:
                    '0 2px 3px rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 10%)',
                }}
              >
                <TabsContent value='latex'>
                  {/* {data && (
                  <GridSelect
                    data={data}
                    defaultSelected={data.filter(
                      (x) => x.title === 'Arytmetyka'
                    )}
                  />
                )} */}
                </TabsContent>
                <TabsContent value='image'>Zdjęcie</TabsContent>
                <TabsContent value='video'>Wideo</TabsContent>
              </div>
            </Tabs>

upp

Answer 1

只需给课程

.underline

一个

z-index

.underline{
/*styles*/
z-index: 69;
}