如何通过第二次单击元素来激活第二个 animation？

Question

澄清我正在使用 React、hmtl、css

我有一个图像，我希望能够来回滑动。 到目前为止，我所做的是制作一个 animation，其中图像将向左滑动，10 秒后它将滑回右侧。 这样做的目的是拥有某种形式的侧边栏菜单。 现在我的问题是我不知道如何添加功能，如果在 10 秒结束之前单击元素，它将更早滑回。 以下是我到目前为止所做的：

下面是我测试这个滑动功能的空间

const Portfolio = ({menuOpen, setMenuOpen}) => {
  const [left, setLeft] = useState(false);
  const [right, setRight] = useState(false);
  const [start, setStart] = useState(true);

  
  const animate = () => {
    setMenuOpen(true);
    setTimeout(() => {
      setMenuOpen(false)
    }, 13000);
  }

...

<Grid container className='PortfolioGrid' sx={{display: 'relative'}}>

          <Grid item xs={6} className='PortfolioLeft'>
            hello
          </Grid>
              
          <Grid item xs={6} className='PortfolioRight'>
            <Box
              onClick={animate}
              id= 'box'
              className={menuOpen ? 'PortfolioRightImg active' : 'PortfolioRightImg'}
              component="img"
              alt="The house from the offer."
              src={img}       
            />
          </Grid>
      </Grid>

这是 css

.PortfolioGrid{
    background-color: aquamarine;

    .PortfolioLeft{
        background-color: bisque;
    }

    .PortfolioRight{
        background-color: rgb(205, 255, 220);

        .PortfolioRightImg{
            height: calc(100vh * 3/12);
            width: calc(100vw * 2/12);

            &.active{
                position: relative;
                animation: slide 3s forwards, slide2 3s 10s forwards;
            }
        }
        

    }

   
}

@keyframes slide {
    0%   {left:0px; top:0px;}
    100% {left:calc((100vw * 2/12)*(-1));}
  }

@keyframes slide2 {
    0%   {left:calc((100vw * 2/12)*(-1));}
    100% {left:0px; top:0px;}

非常感谢任何帮助，但我想补充一点，如果可能的话，我想避免使用 jquery 或香草 javascript，坚持使用 css 或反应解决方案。 谢谢！

Answer 1

使用第二个 class ......它应该可以工作。

const Portfolio = ({menuOpen, setMenuOpen}) => {
  const [left, setLeft] = useState(false);
  const [right, setRight] = useState(false);
  const [start, setStart] = useState(true);

  
  const animate = () => {
    setMenuOpen(true);
    setTimeout(() => {
      setMenuOpen(false)
    }, 13000);
  }

...

<Grid container className='PortfolioGrid' sx={{display: 'relative'}}>

          <Grid item xs={6} className='PortfolioLeft'>
            hello
          </Grid>
              
          <Grid item xs={6} className='PortfolioRight'>
            <Box
              onClick={animate}
              id= 'box'
              className={menuOpen ? 'PortfolioRightImg active' : 'PortfolioRightImg notactive'}  // Here
              component="img"
              alt="The house from the offer."
              src={img}       
            />
          </Grid>
      </Grid>

.PortfolioGrid{
    background-color: aquamarine;

    .PortfolioLeft{
        background-color: bisque;
    }

    .PortfolioRight{
        background-color: rgb(205, 255, 220);

        .PortfolioRightImg{
            height: calc(100vh * 3/12);
            width: calc(100vw * 2/12);

            &.active{
                position: relative;
                animation: slide 3s forwards, slide2 3s 10s forwards;
            }

            /* HERE */
            &.notactive{
                position: relative;
                animation: slide2 3s forwards, slide2 3s 10s forwards;
            }
        }
        

    }

   
}

@keyframes slide {
    0%   {left:0px; top:0px;}
    100% {left:calc((100vw * 2/12)*(-1));}
  }

@keyframes slide2 {
    0%   {left:calc((100vw * 2/12)*(-1));}
    100% {left:0px; top:0px;}

Answer 2

我想出的解决方案是使用 4 个类：right、left、transitionLeft、transitionRight。

.PortfolioBody{
    height: calc(100vh * 4/12);
    width: calc(100vw * 4/12);
    position: relative;

    .PortfolioRightImgContainer{

        .TransitionLeft{
            height: calc(100vh * 3/12);
            width: calc(100vw * 2/12);
            animation: slide 3s forwards;
            
        }
        .TransitionRight{
            height: calc(100vh * 3/12);
            width: calc(100vw * 2/12);

            animation: slide2 3s forwards;
            
        }
        .Left{
            height: calc(100vh * 3/12);
            width: calc(100vw * 2/12);
            position: absolute;
            left:0px;
        }
        .Right{
            height: calc(100vh * 3/12);
            width: calc(100vw * 2/12);
            position: absolute;
            right:0px;
        }
    }

}

这样我在从右到左到左到从右到右之间切换。