How do I add activate a second animation with a second click on an element?-CodePudding

to clarify I'm using React, hmtl, css

I have an image that I want to be able to slide back and forth. What I have done so far is make an animation where the image will slide to the left, and after 10 seconds it will slide back to the right. The purpose of this is to have some form of sidebar menu. Now my problem is I have no idea how to add in the functionality that if the element is clicked before the 10 seconds are up, it will slide back right earlier. Below is what I have done so far:

The below is the space within which I'm testing this sliding functionality

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>

This is the 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;}

Any help is greatly appreciated, but I'd like to add that if at all possible I would like to avoid using jquery or vanilla javascript, sticking to css or react solutions. Thanks!

CodePudding user response：

Using a second class... It should work.

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;}

CodePudding user response：

The solution I came up with was to use 4 classes: 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;
        }
    }

}

this way I change between right to transitionLeft to left to transitionRight to right.