how to start a animtion onclick and on button click go further?-CodePudding

I want to start a animtion on click of a div and after the animtion is done it just keeps it position. I fixed the anitmtion that i works on reloading the page but didnt fix it for onclick do you guys have an idea??

.tsx file:

import styles from "./WaterTracker.module.css";

export default function WaterTracker() {
  return (
    <div className={styles.mainContainer}>
      <div className={styles.wrapper}>
        <div className={styles.mainContent}></div>
      </div>
    </div>
  );
}

.css file :

:root {
    --background: #f8f8f8;
    --dark: #303032;
}

.mainContainer {
    box-sizing: border-box;
    margin: 0 0;
    padding: 0 0;
}

.wrapper {
    background: var(--background);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mainContent {
    position: relative;
    background: var(--dark);
    border: 0.25em solid var(--dark);
    height:8rem;
    width: 8rem;
    outline: 0.25;
    overflow: hidden;
}

.mainContent::before {
    content: "Drink je water";
    font-size: 2rem;
    color: white;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.mainContent::after {
    content: "";
    position: absolute;
    background: var(--background);
    height: 200%;
    width: 200%;
    bottom: -50%;
    left: -50%;
    border-radius: 45%;
    animation: spin 6s ease-in-out forwards;
}

@keyframes spin {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(-100%) rotate(500deg);
    }
}

I hope that when this works i also can change the tranlateY from -100% to any number with a button so the animtion will first go to -50% and when i click on the button to -100% if you guys have a fix for this as whel it would be nice

CodePudding user response：

To make the animation run on click, you can add an onClick event listener to the .mainContent element and use element.style.animationPlayState to start and stop the animation. Here's an example of how you can do this:

 import styles from "./WaterTracker.module.css";

export default function WaterTracker() {
  const mainContentRef = useRef(null);

  function handleClick() {
    if (mainContentRef.current.style.animationPlayState === "paused") {
      mainContentRef.current.style.animationPlayState = "running";
    } else {
      mainContentRef.current.style.animationPlayState = "paused";
    }
  }

  return (
    <div className={styles.mainContainer}>
      <div className={styles.wrapper}>
        <div className={styles.mainContent} onClick={handleClick} ref={mainContentRef}></div>
      </div>
    </div>
  );
}

This code uses a ref to access the .mainContent element and updates its animationPlayState property on click to start and stop the animation.

You can also change the translateY value by adding a state variable to track the current translateY value and updating it on click. Here's an example of how you can do that:

    import styles from "./WaterTracker.module.css";

export default function WaterTracker() {
  const mainContentRef = useRef(null);
  const [translateY, setTranslateY] = useState(-100);

  function handleClick() {
    if (mainContentRef.current.style.animationPlayState === "paused") {
      mainContentRef.current.style.animationPlayState = "running";
    } else {
      mainContentRef.current.style.animationPlayState = "paused";
      setTranslateY(translateY - 50);
    }
  }

  return (
    <div className={styles.mainContainer}>
      <div className={styles.wrapper}>
        <div
          className={styles.mainContent}
          onClick={handleClick}
          ref={mainContentRef}
          style={{ "--translateY": `${translateY}%` }}
        ></div>
      </div>
    </div>
  );
}

This uses a state variable to track the current translateY value and updates it on click by subtracting 50 from the current value. The updated value is then passed to the style prop of the .mainContent element as a CSS custom property. You'll also need to update your keyframe animation to use the --translateY custom property instead of a hard-coded value for translateY.

CodePudding user response：

You can use Ionic's Animation. Check out the docs for examples. https://ionicframework.com/docs/utilities/animations