重構 開關Switch

收穫:

當給根類設定transition:ns時,當根類的屬性變化都會產生過渡態,即當再新增乙個類,這個類出現/消失會出現兩種過渡態
動畫: 按鈕移動、軌道顏色漸變
引數: static proptypes=

使用:

import react,

from
'react'
import switch from
'./switch/switch'
class
extends
component
render()
checked /
>
'20px' onchange=
disabled /
>
<
/div>)}
}export

import react,

from
'react'
import proptypes from
'prop-types'
import
'./switch.css'
class
extends
component
state=
componentdidmount()
=this
.props;
const switchf=
this
.switchf.style;
trackcheckedkcolor&&switchf.
setproperty
('--trackcheckedkcolor'
,trackcheckedkcolor)
; trackheight&&switchf.
setproperty
('--trackheight'
,trackheight)
; circlewidth&&switchf.
setproperty
('--circlewidth'
,circlewidth)
; gap&&switchf.
setproperty
('--gap'
,gap)
; trackwidth&&switchf.
setproperty
('--trackwidth'
,trackwidth)
; circlecolor&&switchf.
setproperty
('--circlecolor'
,circlecolor)
; trackcolor&&switchf.
setproperty
('--trackcolor'
,trackcolor)
; checked&&
this
.setstate()
; disabled&&switchf.
setproperty
('--circlepointer'
,'not-allowed');
}_switchclick()
,()=>)}
}render()
=this
.state;
const
=this
.props;
return
(} classname=
'jf-switch-container'
>
}>
<
/div>
classname=`}
>
<
/div>
<
/div>)}
}exportswitch.css:
.jf-
switch
-container
.jf-
switch
-track
.jf-
switch
-track-checked
.jf-
switch
-circle
.jf-
switch
-checked
.jf-
switch
-disabled

開關按鈕Switch

思路 自定義view，重寫和封裝好方法，外部直接呼叫 三個構造方法 onmeasure onlayout ondraw 重寫這些方法,實現自定義控制項 測量 在這個方法裡指定自己的寬高 布局 擺放 繪製內容 觸控事件ontouchevent motionevent event 封裝自定義方法 狀態更...

switch開關的製作

html css 效果圖 擴充套件 a b表示a之後出現的所有b，且a b有相同的父元素。transition all 0.3s ease 過渡。transition property all 屬性 transition duration 多長時間完成該動畫。transition timing fu...

JQuery實現switch開關

實現效果為如下的選擇開關 首先在布局上，可以清晰看到最外層乙個div包裹，內部兩個div組成，然後兩個div內部分別包裹了span用於顯示開關上的文字，html 如下 日同比周同比 對於該樣式的布局實現css如下 switch container switch btn left btn right ...