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>