切り替え

<ToggleContainer onClick={toggleHandler}
         <div className={`toggle-container ${isOn ? "toggle--checked" : ""}`} />
         <div className={`toggle-circle ${isOn ? "toggle--checked" : ""}`} />
        <Desc> Toggle Swithch {isOn ? "ON" : "OFF"} </Desc>
      </ToggleContainer>

指導によって、私たちはすぐにこの点を実現しました.ご覧のように、isonが成功した場合、classNameはtoggle--checkedに変更されます.
classNameを変更すると、同じ設定が適用され、切り替えが加えられます.選択されている場合は、いくつかの設定を変更する必要があります.

親選択プログラム'&'

「&」を使用して、親(親)セレクタをネストで参照します.

.button {
	color: #000;
    
    &:hover {
    color:red;
    }
}

同じです.

.button{
	color:#000;
}
.button:hover{
    	color:red;
    }

トクルcss

これらの親セレクタを使用すると、親セレクタを置換の切り替え--checkedに参照できます.

切替-コンテナスタイル要素

width: 50px;
    height: 24px;
    border-radius: 30px;
    background-color: #8b8b8b;
    &.toggle--checked {
      background-color : #4900CE;
    }

切替-円形スタイル要素

.toggle-circle {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #ffffff;
    &.toggle--checked {
      left: 27px;
    }

ここまでは実施できますが、自然に移動していません.
ボタンを押すと、すぐに完了した画像が表示されるのが問題です.

CSS取引

cssプロパティを変更する場合は、すぐに影響を及ぼすのではなく、プロパティ値が一定期間変化していることを確認します.
移行はこれらの問題を解決した.

.toggle-circle {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #ffffff;
    &.toggle--checked {
      transition : all .3s ease;
      left: 27px;
    }

transition

transition : property duration function delay
値が指定されていない場合は、デフォルトで指定します.

transition-propertyが指定されていない場合、すべてのPropertyが取引目標になります.だから全部
指定する場合はtransition-property:width,background-colorのようなフォーマットを使用します.

Transition-time-function:トランザクション効果の変化フロー、時間の変化速度などの変化のリズムを指定します.

遷移-遅延:

プロトコルの変更とトランザクションの実際の開始の間で待機する時間を秒単位またはミリ秒単位で指定します.
transitionの使用

&.toggle--checked {
      left: 27px;
      transition: all .3s ease;
    }

変えたら自然に通り過ぎます!