我似乎找不到具有多個屬性的CSS過渡速記的正確語法。這沒有做任何事情：.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，FF和Safari中進行測試。我究竟做錯了什么？編輯：為了清楚起見，我正在尋找簡化我的CSS的簡寫版本。使用所有供應商前綴已經足夠enough腫。還擴展了示例代碼。
3 回答
素胚勾勒不出你
TA貢獻1827條經驗 獲得超9個贊
如果您有想要以同樣的方式過渡幾個特定的屬性（因為你也有你特別一些屬性并不想轉型，比方說opacity），另一種選擇是做這樣的事情（略去了前綴）：
.myclass {
transition: all 200ms ease;
transition-property: box-shadow, height, width, background, font-size;
}
第二個聲明會覆蓋其all上方的簡短聲明中的，并（有時）使代碼更簡潔。
/* 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>
- 3 回答
- 0 關注
- 471 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消