组件封装思路——以一个简单的加载动画为例

.loading{杈硅窛锛?00鍍忕礌锛涢珮搴︼細100px锛沴ine-height:100px;}.loading>span{display:inline-block;鏂囨湰杞崲锛氬ぇ鍐欙紱瀛楁瘝闂磋窛锛?px锛沘nimation:loadingWord800msease-inininfinitealternate;}/*10涓瓧姣嶏紝姣忎竴涓殑寤惰繜閮戒笉鐩稿悓*/.loading-1>span:nth-of-type(1){animation-delay:200ms;}.loading-1>span:nth-of-type(2){鍔ㄧ敾寤惰繜锛?00ms锛泒.loading-1>span:nth-of-type(3){鍔ㄧ敾寤惰繜锛?00ms锛泒.loading-1>span:nth-of-type(4){鍔ㄧ敾寤惰繜锛?00ms锛泒.loading-1>span:nth-of-type(5){鍔ㄧ敾寤惰繜锛?00ms锛泒.loading-1>span:nth-of-type(6){鍔ㄧ敾寤惰繜锛?00ms锛泒.loading-1>span:nth-of-type(7){鍔ㄧ敾寤惰繜锛?00ms锛泒.loading-1>span:nth-of-type(8){鍔ㄧ敾寤惰繜锛?00ms锛泒.loading-1>span:nth-of-type(9){鍔ㄧ敾寤惰繜锛?000ms锛泒.loading-1>span:nth-of-type(10){鍔ㄧ敾寤惰繜锛?100ms锛泒@keyframesloadingWord{0%{transform:translateY(0);}50%{杞崲锛歵ranslateY(0);}100%{杞崲锛歵ranslateY(-16px);}}杩欐牱灏卞彲浠ュ揩閫熷疄鐜板姩鐢讳簡銆傜劧鍚庝笂闈㈢殑浠ｇ爜灏嗚捣浣滅敤銆傚鏋滄垜浠渶瑕佸皢杩欎釜鍔犺浇鍔ㄧ敾灏佽鍒颁竴涓粍浠朵腑锛屾柟渚垮悗缁被浼煎満鏅殑浣跨敤锛屾垜浠渶瑕佽€冭檻鐨勪笢瑗垮氨鏇村浜嗭紝涓嶈兘绠€鍗曠殑瀹炵幇杩欑鏁堟灉銆傞鍏堬紝鎴戜滑闇€瑕佸垎鏋愪竴涓嬭繖涓嚱鏁颁腑鍙兘鍙戠敓鍙樺寲鐨勯儴鍒嗭細杩欎釜鍔ㄧ敾浠ｈ〃浜嗕竴涓瓑寰呯殑杩囩▼銆傜瓑寰呯殑杩涚▼鍙兘姝ｅ湪loading銆乴oading锛涗笅杞斤紝涓嬭浇锛泆ploading,uploading,etc.鎵€浠ヨ繖閲岀殑鏂囧瓧闇€瑕佹槸鍙厤缃殑銆傛枃鏈殑鏍峰紡鍙兘闇€瑕佹洿鏀广€傛牳蹇冩槸鏂囧瓧澶у皬鍜岄鑹层€傚姩鐢绘柟寮忋€佸姩鐢婚鐜囥€傚洜涓鸿繖涓粍浠舵湰韬氨鏄烦璺冪瓑寰呭姩鐢伙紝鎵€浠ュ缓璁慨澶嶅姩鐢婚儴鍒嗐€傚惁鍒欙紝缁勪欢杩囦簬鐏垫椿锛屼娇鐢ㄨ捣鏉ヤ細寰堜笉鏂逛究銆備笉濡ㄥ疄鐜颁袱涓粍浠躲€傛枃鏈儴鍒嗗拰鍓嶉潰鐨勪唬鐮佷竴鏍凤紝闇€瑕佸湪CSS涓‖缂栫爜绱㈠紩锛屽苟涓烘瘡涓浐瀹氫綅缃殑瀛愬厓绱犺缃姩鐢诲欢杩熴€傚鏋滄枃鏈暱搴︿笉鍥哄畾锛岄偅涔堣繖绉嶅啓娉曟槸鏈夐棶棰樼殑銆傝繖鏄垜浠鍏堣瑙ｅ喅鐨勩€傝繖鍙互閫氳繃浣跨敤css鍙橀噺鏉ヨВ鍐炽€備唬鐮佸涓?divclass="loadingloading-2">loading銆?/span>..