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

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

 document.querySelector('.switch').addEventListener('click', function(event) { console.info(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>

注意： 在此处阅读有关该主题的更多信息。

Answer 2

正如Barthy提到的，你不能动画/过渡margin: auto ， magrin 也不是动画/过渡的最佳方式。 为此，最好采用transform属性。 如何创建高性能的 CSS 动画

有保证金的解决方案

 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>