最近在自己做一個曉得websocket項目侥祭，首頁需要一個登錄的頁面蓖宦，這個登錄頁面是一個彈框齐婴。以前使用彈框總是用現(xiàn)成的組件，比如antd的ui庫里邊的Modal稠茂， 這種使用起來也非常的方便柠偶，但是，今天想自己實現(xiàn)一個彈框組件睬关。
難點
要寫一個彈框诱担，有以下難點
- 蒙層， 彈框顯示的時候需要將后面的dom元素隱藏电爹。
- 彈框內(nèi)容dom化蔫仙， 作為一個組件，靈活是必須的丐箩，首先需要將內(nèi)容可定制
- 動畫摇邦， 彈框的入場和離場等動效恤煞。
- 組件間的通信以及解耦， 確認(rèn)和取消的回調(diào)施籍，以及在dom分層上實現(xiàn)與父組件隔離
1.動畫
????我覺得動畫是最難的居扒，首先react組件不像之前對于Jquery式的過程式開發(fā)，如果是jquery丑慎，通過id拿到dom節(jié)點實例喜喂，之后通過修改這個節(jié)點的style和class，就能達(dá)到效果竿裂。同樣的玉吁，react也可以這樣開發(fā)，通過refs去拿實例節(jié)點腻异。通過修改class去達(dá)到實現(xiàn)動畫的目的诈茧，這兩種開發(fā)方式是都可行的。
????但是捂掰，react是狀態(tài)態(tài)是開發(fā)，聽前輩們說曾沈，這種開發(fā)框架的本意是通過修改state的狀態(tài)來達(dá)到控制頁面的dom元素这嚣。如果使用refs去拿實例節(jié)點去顯式的去修改，那還不如用jquery方便好寫塞俱。
???? 那么我們可以將classname作為一個state姐帚，使用定時器，延時控制classname的改變障涯。
2. 動畫的使用
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
transform
CSS transform屬性允許你旋轉(zhuǎn)罐旗，縮放，傾斜或平移給定元素唯蝶。這是通過修改CSS視覺格式化模型的坐標(biāo)空間來實現(xiàn)的九秀。
這里常用的幾個屬性就是： scale， rotate粘我， translate鼓蜒， 分別對應(yīng)縮放， 旋轉(zhuǎn)和平移征字，后綴加上x或者y就是朝它們的x或者y軸做操作都弹，
rotateX(10deg);
translate3D(12deg, 13deg, 14deg)
scaleY(10deg)
后綴3D和2D分別作3D和2D動畫，但是要注意：
Internet Explorer 10匙姜、Firefox畅厢、Opera 支持 transform 屬性。
Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉(zhuǎn)換）氮昧。
Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉(zhuǎn)換）框杜。
Opera 只支持 2D 轉(zhuǎn)換浦楣。
transition
Transitions可以為一個元素在不同狀態(tài)之間切換的時候定義不同的過渡效果。比如在不同的偽元素之間切換霸琴，它是一個簡寫的屬性椒振，用于設(shè)置四個過渡屬性：transition-property（過渡的類型）、transition-duration（過渡的持續(xù)時間）梧乘、transition-timing-function（過渡速度效果的速度曲線）澎迎、transition-delay（規(guī)定過渡從何時開始），一般設(shè)置只設(shè)置前兩個屬性选调， 后面兩個很少用夹供，涉及到極為高深的數(shù)學(xué)。示例：
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
