第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

具有多個(gè)屬性的CSS過渡簡(jiǎn)寫?

具有多個(gè)屬性的CSS過渡簡(jiǎn)寫?

我似乎找不到具有多個(gè)屬性的CSS過渡速記的正確語(yǔ)法。這沒有做任何事情:.element {  -webkit-transition: height .5s, opacity .5s .5s;     -moz-transition: height .5s, opacity .5s .5s;      -ms-transition: height .5s, opacity .5s .5s;          transition: height .5s, opacity .5s .5s;  height: 0;  opacity: 0;  overflow: 0;}.element.show {  height: 200px;  opacity: 1;}我用javascript添加了show類。元素變得更高且可見,它只是不過渡。在最新的Chrome,F(xiàn)F和Safari中進(jìn)行測(cè)試。我究竟做錯(cuò)了什么?編輯:為了清楚起見,我正在尋找簡(jiǎn)化我的CSS的簡(jiǎn)寫版本。使用所有供應(yīng)商前綴已經(jīng)足夠腫。還擴(kuò)展了示例代碼。
查看完整描述

3 回答

?
ibeautiful

TA貢獻(xiàn)1993條經(jīng)驗(yàn) 獲得超6個(gè)贊

如果您有想要以同樣的方式過渡幾個(gè)特定的屬性(因?yàn)槟阋灿心闾貏e一些屬性并不想轉(zhuǎn)型,比方說(shuō)opacity),另一種選擇是做這樣的事情(略去了前綴):


.myclass {

    transition: all 200ms ease;

    transition-property: box-shadow, height, width, background, font-size;

}

第二個(gè)聲明會(huì)覆蓋其all上方的簡(jiǎn)短聲明中的,并(有時(shí))使代碼更簡(jiǎn)潔。


/* prefixes omitted for brevity */

.box {

    height: 100px;

    width: 100px;

    background: red;

    box-shadow: red 0 0 5px 1px;

    transition: all 500ms ease;

    /*note: not transitioning width */

    transition-property: height, background, box-shadow;

}


.box:hover {

  height: 50px;

  width: 50px;

  box-shadow: blue 0 0 10px 3px;

  background: blue;

}

<p>Hover box for demo</p>

<div class="box"></div>


查看完整回答
反對(duì) 回復(fù) 2019-12-09
?
慕尼黑5688855

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超2個(gè)贊

通過在過渡不透明度屬性時(shí)延遲0.5秒,元素在整個(gè)高度過渡期間將完全透明(因此不可見)。因此,您真正看到的唯一一件事就是不透明度發(fā)生變化。因此,您將獲得與將height屬性保留在過渡之外相同的效果:


“過渡:不透明度.5s .5s;”


那是你想要的嗎?如果不是這樣,并且您希望看到高度過渡,則在過渡的整個(gè)過程中,透明度都不能為零。


查看完整回答
反對(duì) 回復(fù) 2019-12-09
  • 3 回答
  • 0 關(guān)注
  • 756 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)