過(guò)渡模塊

• 1.過(guò)渡三要素
  1.1必須要有屬性發(fā)生變化
  1.2必須告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過(guò)渡效果
  1.3必須告訴系統(tǒng)過(guò)渡效果持續(xù)時(shí)長(zhǎng)

2.注意點(diǎn)
當(dāng)多個(gè)屬性需要同時(shí)執(zhí)行過(guò)渡效果時(shí)用逗號(hào)隔開(kāi)即可
transition-property: width, background-color;
transition-duration: 5s, 5s;

<style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            /*transition: width,3s;*/
            /*告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過(guò)渡效果*/
            transition-property: width,background-color;
            /*告訴系統(tǒng)過(guò)渡效果持續(xù)的時(shí)長(zhǎng)*/
            transition-duration: 3s,2s;
        }

        /*.box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            transition: background-color, 3s;
        }*/

        /*:hover這個(gè)偽類(lèi)選擇器除了可以用在a標(biāo)簽上, 還可以用在其它的任何標(biāo)簽上*/
        .box1:hover{
            width: 500px;
            background-color: greenyellow;
        }

        /*.box2:hover{
            background-color: green;
        }*/
    </style>
<div class="box1"></div>
<div class="box2"></div>

• 過(guò)渡模塊其余屬性
  • transition-delay: 2s;告訴系統(tǒng)延遲多少秒之后才開(kāi)始過(guò)渡動(dòng)畫(huà)
  • transition-timing-function: linear;告訴系統(tǒng)過(guò)渡動(dòng)畫(huà)的運(yùn)動(dòng)的速度類(lèi)型
    • transition-timing-function屬性取值linear,ease,ease-in,ease-out,ease-in-out
      
      速度類(lèi)型
• 過(guò)渡屬性連寫(xiě)
  • transition: 過(guò)渡屬性 過(guò)渡時(shí)長(zhǎng) 運(yùn)動(dòng)速度 延遲時(shí)間;

  • 過(guò)渡連寫(xiě)注意點(diǎn)
    2.1和分開(kāi)寫(xiě)一樣, 如果想給多個(gè)屬性添加過(guò)渡效果也是用逗號(hào)隔開(kāi)即可
    2.2連寫(xiě)的時(shí)可以省略后面的兩個(gè)參數(shù), 因?yàn)橹灰帉?xiě)了前面的兩個(gè)參數(shù)就已經(jīng)滿(mǎn)足了過(guò)渡的三要素
    2.3如果多個(gè)屬性運(yùn)動(dòng)的速度/延遲的時(shí)間/持續(xù)時(shí)間都一樣, 那么可以簡(jiǎn)寫(xiě)為
    transition:all 0s;

  • 編寫(xiě)過(guò)渡套路
    1.1不要管過(guò)渡, 先編寫(xiě)基本界面
    1.2修改我們認(rèn)為需要修改的屬性
    1.3再回過(guò)頭去給被修改屬性的那個(gè)元素添加過(guò)渡即可