css - How to prevent animation reset when div changes? - Stack Overflow

admin管理员组

文章数量:1122826

I have a parent div, which have button "show details". Here is how it works: when it pressed -> bool changes -> details showing up.

Code is something like this: (instead of blabla is huge div)

import React, { useState, useCallback } from 'react';

function Page() {
  const [showDetails, setShowDetails] = useState(true);

  const PurchaseComponent = () => {
    const toggleDetails = useCallback(() => {
      setShowDetails(prevShowDetails => !prevShowDetails);
    }, []);

    return (
        <div className="mydiv">
            <button onClick={toggleDetails}>
              Show Details
            </button>
            {showDetails && (
              <div>BlaBla</div>
            )}
        </div>
    );
  };

  return (
    <div>
        <PurchaseComponent />
    </div>
  );
}

export default Page;

CSS:

.mydiv {
    min-height: 250px;
    width: 800px;
    border-radius: 10px;
    padding: 50px;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #4d474f, #282f32, #371211, #7d1416, #850b0f, #40080a, #850b0f, #7d1416, #371211, #282f32, #4d474f);
    background-size: 2200% 2200%;

    -webkit-animation: AnimationName 51s ease infinite;
    animation: AnimationName 51s ease infinite;
    transition: transform 2s ease;
  }
  

  @-webkit-keyframes AnimationName {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
  }
  @keyframes AnimationName {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
  }

Parent have an animated background made with gradient animator. All I want it to not restart when details button is pressed (childs updating). Size of parent div changes when button pressed.

I have a parent div, which have button "show details". Here is how it works: when it pressed -> bool changes -> details showing up.

Code is something like this: (instead of blabla is huge div)

import React, { useState, useCallback } from 'react';

function Page() {
  const [showDetails, setShowDetails] = useState(true);

  const PurchaseComponent = () => {
    const toggleDetails = useCallback(() => {
      setShowDetails(prevShowDetails => !prevShowDetails);
    }, []);

    return (
        <div className="mydiv">
            <button onClick={toggleDetails}>
              Show Details
            </button>
            {showDetails && (
              <div>BlaBla</div>
            )}
        </div>
    );
  };

  return (
    <div>
        <PurchaseComponent />
    </div>
  );
}

export default Page;

CSS:

.mydiv {
    min-height: 250px;
    width: 800px;
    border-radius: 10px;
    padding: 50px;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #4d474f, #282f32, #371211, #7d1416, #850b0f, #40080a, #850b0f, #7d1416, #371211, #282f32, #4d474f);
    background-size: 2200% 2200%;

    -webkit-animation: AnimationName 51s ease infinite;
    animation: AnimationName 51s ease infinite;
    transition: transform 2s ease;
  }
  

  @-webkit-keyframes AnimationName {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
  }
  @keyframes AnimationName {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
  }

Parent have an animated background made with gradient animator. All I want it to not restart when details button is pressed (childs updating). Size of parent div changes when button pressed.

• css
• reactjs

Share Improve this question Follow edited Nov 21, 2024 at 20:21 SyndRain 3,75033 gold badges1313 silver badges3636 bronze badges asked Nov 21, 2024 at 19:44 zombiezombie 2311 silver badge33 bronze badges 2

• Could you turn this into a snippet so it's easier to replicate please? meta.stackoverflow.com/questions/269753/… – admcfajn Commented Nov 21, 2024 at 19:57
• 1 Not sure where the downvotes came from. The code is minimized and the problem is fully reproducible when pasting directly into a sandbox – SyndRain Commented Nov 21, 2024 at 20:08

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

The animation restarts if the animated div's parent rerenders. You can simply move the animated div to a wrapper component.

Codesandbox

function AnimatedCard({ children }) {
  return <div className="mydiv">{children}</div>;
}

function Page() {
  const [showDetails, setShowDetails] = useState(true);

  const PurchaseComponent = () => {
    const toggleDetails = useCallback(() => {
      setShowDetails((prevShowDetails) => !prevShowDetails);
    }, []);

    return (
      <>
        <button onClick={toggleDetails}>Show Details</button>
        {showDetails && <div>BlaBla</div>}
      </>
    );
  };

  return (
    <AnimatedCard>
      <PurchaseComponent />
    </AnimatedCard>
  );
}

export default Page;

本文标签： cssHow to prevent animation reset when div changesStack Overflow