ionic的checkbox分析

booster 發(fā)布于2019-08-30 12:44 / 1825人閱讀

摘要：之前分析了一個(gè)原生的，趁熱打鐵分析的自帶定義了一個(gè)父節(jié)點(diǎn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。子節(jié)點(diǎn)讓元素的子節(jié)點(diǎn)像元素一樣。綜上，只是給了一個(gè)邊框的效果。子節(jié)點(diǎn)這個(gè)就是那個(gè)后顯示的對(duì)號(hào)。

之前分析了一個(gè)原生的checkbox，趁熱打鐵分析ionic的自帶checkbox.

html


  check

css

- checkbox

.checkbox {
  position: relative;
  display: inline-block;
  padding: 7px 7px;
  cursor: pointer; }

定義了一個(gè)父節(jié)點(diǎn)。
display: inline-block;此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。
- checkbox子節(jié)點(diǎn)input:before

  .checkbox input:before{      
    display: table;
    width: 100%;
    height: 100%;
    border-color: #ffffd;
    border-width: 1px;
    border-style: solid;
    border-radius: 28px;
    background: #fff;
    content: " ";
    -webkit-transition: background-color 20ms ease-in-out;
    transition: background-color 20ms ease-in-out; }

display:table;讓元素的子節(jié)點(diǎn)像table元素一樣。
使用基于表格的CSS布局，使我們能夠輕松定義一個(gè)單元格的邊界、背景等樣式，而不會(huì)產(chǎn)生因?yàn)槭褂昧藅able那樣的制表標(biāo)簽所導(dǎo)致的語(yǔ)義化問題。
width: 100%;height: 100%;高度寬度。

border-color: #ffffd;border-width: 1px;border-style: solid;border-radius: 28px;

定義一個(gè)圓形的邊框，淺灰色。
transition: background-color 20ms ease-in-out;這是一個(gè)CSS3過渡效果。即背景顏色有2ms的過度。
綜上，input:before只是給了一個(gè)邊框的效果。
- checkbox子節(jié)點(diǎn)input:after

.checkbox input:after{
  -webkit-transition: opacity 0.05s ease-in-out;
  transition: opacity 0.05s ease-in-out;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  top: 33%;
  left: 25%;
  display: table;
  width: 14px;
  height: 6px;
  border: 1px solid #fff;
  border-top: 0;
  border-right: 0;
  content: " ";
  opacity: 0; }

這個(gè)就是那個(gè)checked后顯示的對(duì)號(hào)。
transition: opacity 0.05s ease-in-out;表示一個(gè)透明度的漸變。
ease-in-out:
ease 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果;
ease-in 規(guī)定以慢速開始的過渡效果;
ease-out 規(guī)定以慢速結(jié)束的過渡效果;
ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果
transform: rotate(-45deg);旋轉(zhuǎn)45度。
后面的其實(shí)就在弄出“對(duì)號(hào)”

checkbox子元素Input:checked:before

.checkbox input:checked:before {
   background: #387ef5;
   border-color: #387ef5;
   border-width: 2px;
}

當(dāng)checked時(shí)，Input:before的背景顏色和邊框顏色都是藍(lán)色。

checkbox子元素Input:checked:after

.checkbox input:checked:after{
   opacity: 1; 
}

當(dāng)checked時(shí)，input:after透明度為0(顯示那個(gè)“對(duì)號(hào)”).

結(jié)論

綜上所述，
input:before是一個(gè)邊框效果
input:after是一個(gè)“對(duì)號(hào)”效果
當(dāng)checked時(shí)，input:after（對(duì)號(hào)）顯示，input:before（原來(lái)的灰色邊框）的背景和邊框都變?yōu)樗{(lán)色。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115031.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

booster

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

你只知道別人很牛，但是你知道那些編程水平很高的程序員是怎么練成的嗎?

閱讀 1704·2021-09-26 09:55
公司主機(jī)號(hào)是什么-電腦主機(jī)號(hào)是什么？

閱讀 3743·2021-09-22 15:31
主機(jī)是什么意思-通常所說的主機(jī)是指什么？

閱讀 7456·2021-09-22 15:12
Tomcat關(guān)聯(lián)開發(fā)工具eclipse——項(xiàng)目運(yùn)行環(huán)境配置之一

閱讀 2223·2021-09-22 10:02
??爆肝十二萬(wàn)字《python從零到精通教程》，從零教你變大佬??（建議收藏）

閱讀 4696·2021-09-04 16:40
2018年前端面試題（秋季面試隨意整理的）

閱讀 1076·2019-08-30 15:55
CSS外掛：Sass的那些裝逼函數(shù)(function)

閱讀 3034·2019-08-30 12:56
ionic的checkbox分析

閱讀 1826·2019-08-30 12:44

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

ionic的checkbox分析

相關(guān)文章