如何使用 React 在组件渲染中禁用元素的动画？

Question

I am studying web development and this afternoon I have coded this switch using React and styled-components, but when the page loads the animation from the button is played. How do I disable it from initially animating?

Ive tried playing around in the CSS styles but it isnt working very well.

I have uploaded a live version to CodeSandbox

https://codesandbox.io/s/translate-button-forked-8jfpu?file=/src/Button.jsx

import styled, { keyframes } from "styled-components";

const toggle = keyframes`
      from {
        transform: translate(0);
      }
      to {
        transform: translate(149px);
      }`;
const unToggle = keyframes`
      from {
        transform: translate(149px);
      }
      to {
        transform: translate(0);
      }`;

const ButtonStyles = styled.div`
  margin-top: 1rem;
  width: 300px;
  height: 50px;
  background-color: #fff;
  border-radius: 50px;
  padding: 3px;
  cursor: pointer;

  .button-container {
    display: flex;
    height: inherit;
    width: inherit;
    align-items: center;

    .button-background {
      width: 150px;
      height: inherit;
      background-color: blue;
      border-radius: 50px;
      animation: 0.6s ease-in-out ${unToggle};
      animation-fill-mode: forwards;
      &.active {
        animation: 0.6s ease-in-out ${toggle};
        animation-fill-mode: forwards;
      }
    }

    .button-country {
      width: inherit;
      position: absolute;
      display: flex;
      justify-content: space-around;
      color: #979797;
      transition: 1.2s;
      span:nth-child(1) {
        transition: 1.2s;
        color: #fff;
      }
      &.white {
        transition: 1.2s;
        color: #fff;
        span:nth-child(1) {
          color: #979797;
        }
      }
    }
  }
`;

export default function Button() {
  const [toggleButton, setToggleButton] = useState("");
  const [labelColor, setLabelColor] = useState("");

  return (
    <ButtonStyles>
      <div
        onClick={() => {
          setToggleButton(!toggleButton ? "active" : "");
          setLabelColor(!labelColor ? "white" : "");
        }}
        className="button-container"
      >
        <div className={`button-background ${toggleButton}`}></div>
        <div className={`button-country ${labelColor}`}>
          <span>Brasil</span>
          <span>EUA</span>
        </div>
      </div>
    </ButtonStyles>
  );
}

Answer 1

Make it easier. Use transition. In the code below, I removed the keyframes and changed the ".button-background" class.

Now this class uses transition instead of animation. This will now work the way you wanted it to.

https://codesandbox.io/s/translate-button-forked-h1yow

.button-background {
  width: 150px;
  height: inherit;
  background-color: blue;
  border-radius: 100px;
  transition: 0.6s ease-in-out;

  &.active {
    transform: translate(100%);
  }
}

If you still want to use animation. Then you can enable these animations depending on the class or prop passed in.

You can see the code below, the ".button-background" class has been changed and the arguments passed to setToggleButton have been changed.

import React, { useState } from "react";
import styled, { keyframes } from "styled-components";

const toggle = keyframes`
    from {
      transform: translate(0);
    }

    to {
      transform: translate(100%);
    }
`;

const unToggle = keyframes`
    from {
      transform: translate(100%);
    }

    to {
      transform: translate(0);
    }
`;

const ButtonStyles = styled.div`
  margin-top: 1rem;
  width: 300px;
  height: 50px;
  background-color: #fff;
  border-radius: 100px;
  padding: 2px;
  cursor: pointer;

  .button-container {
    display: flex;
    height: inherit;
    width: inherit;
    align-items: center;

    .button-background {
      width: 150px;
      height: inherit;
      background-color: blue;
      border-radius: 100px;
      animation: 0.6s ease-in-out;
      animation-fill-mode: forwards;
      &.unToggle {
        animation-name: ${unToggle};
      }
      &.toggle {
        animation-name: ${toggle};
      }
    }

    .button-country {
      width: inherit;
      position: absolute;
      display: flex;
      justify-content: space-around;
      color: #979797;
      transition: 1.2s;
      span:nth-child(1) {
        transition: 1.2s;
        color: #fff;
      }
      &.white {
        transition: 1.2s;
        color: #fff;
        span:nth-child(1) {
          color: #979797;
        }
      }
    }
  }
`;

export default function Button() {
  const [toggleButton, setToggleButton] = useState("");
  const [labelColor, setLabelColor] = useState("");

  return (
    <ButtonStyles>
      <div
        onClick={() => {
          setToggleButton(toggleButton === 'toggle' ? "unToggle" : "toggle");
          setLabelColor(!labelColor ? "white" : "");
        }}
        className="button-container"
      >
        <div className={`button-background ${toggleButton}`}></div>
        <div className={`button-country ${labelColor}`}>
          <span>Brasil</span>
          <span>EUA</span>
        </div>
      </div>
    </ButtonStyles>
  );
}