CSS边距过渡在反应中没有动画

Question

我正在尝试创建一个移动顺畅的简单反应开关组件

这是反应代码

export function Switch({callBackOn, callBackOff}){
    const [switchState, setState] = useState("");

    function callback(){
        if(switchState == ""){
            setState("switch-on")
        }
        else{
            setState("")
        }
    }
    return(
      <div onClick={callback} className={"switch " + switchState}>
        <div></div>
      </div>
    )
  }

这是我的css

.switch {
  background-color: red;
  height: 5rem;
  width: 10rem;
  border-radius: 2.5rem;
  border: 5px solid;
  transition: 1s;
  position: relative;
}

.switch-on {
  background-color: green !important;
}

.switch div {
  height: 5rem;
  width: 5rem;
  border-radius: 2.5rem;
  background-color: white;
  transition: margin-left 1s;
}

.switch-on div {
  margin-left: auto;
}

背景颜色变化过渡有效，但边距变化根本没有动画效果。我也尝试过使用关键帧和动画属性，但也没有用

Answer 1

正如 Barthy 所提到的，您不能动画/过渡margin: auto，而且 ma​​grin 也不是动画/过渡的最佳方式。为此，最好使用transform 属性。 How to create high-performance CSS animations

有边距的解决方案

function Switch({ callBackOn, callBackOff }) {
  const [switchState, setState] = React.useState("");

  function callback() {
    if (switchState == "") {
      setState("switch-on");
    } else {
      setState("");
    }
  }
  return (
    <div onClick={callback} className={"switch " + switchState}>
      <div></div>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <Switch />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
    <App />,
  rootElement
);

.App {
  font-family: sans-serif;
  text-align: center;
}

.switch {
  background-color: red;
  height: 5rem;
  width: 10rem;
  border-radius: 2.5rem;
  border: 5px solid;
  transition: 1s;
  position: relative;
}

.switch-on {
  background-color: green;
}

.switch div {
  height: 5rem;
  width: 5rem;
  border-radius: 2.5rem;
  background-color: white;
  transition: margin-left 1s;
}

.switch-on div {
  margin-left: 5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

转换解决方案

function Switch({ callBackOn, callBackOff }) {
  const [switchState, setState] = React.useState("");

  function callback() {
    if (switchState == "") {
      setState("switch-on");
    } else {
      setState("");
    }
  }
  return (
    <div onClick={callback} className={"switch " + switchState}>
      <div></div>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <Switch />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
    <App />,
  rootElement
);

.App {
  font-family: sans-serif;
  text-align: center;
}

.switch {
  background-color: red;
  height: 5rem;
  width: 10rem;
  border-radius: 2.5rem;
  border: 5px solid;
  transition: 1s;
  position: relative;
}

.switch-on {
  background-color: green;
}

.switch div {
  height: 5rem;
  width: 5rem;
  border-radius: 2.5rem;
  background-color: white;
  transition: transform 1s;
}

.switch-on div {
  transform: translateX(5em);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

您无法真正在 auto 和固定值之间进行转换。 既然你知道开关的宽度，我建议只添加正确的值：

document.querySelector('.switch').addEventListener('click', function(event) {
  event.currentTarget.classList.toggle('switch-on')
})

.switch {
  background-color: red;
  height: 5rem;
  width: 10rem;
  border-radius: 2.5rem;
  border: 5px solid;
  transition: 1s;
  position: relative;
}

.switch-on {
  background-color: green !important;
}

.switch div {
  height: 5rem;
  width: 5rem;
  border-radius: 2.5rem;
  background-color: white;
  transition: margin-left 1s;
}

.switch-on div {
  margin-left: 5rem;
}

<div class="switch">
  <div></div>
</div>

注意：read more on the subject here.