問(wèn)題描述

img{ opacity: 0.5; transition: 0.35s all;}img:hover{ opacity: 1; margin-left: -50px;}<img src='http://m.b3g6.com/wenda/img/1.jpg'>

如上簡(jiǎn)單動(dòng)畫代碼也知道transtion屬性各個(gè)參數(shù)以及日常用法，但我嘗試了下改變transition: 0.35s all;屬性的設(shè)置位置，比如第一種情況也就是如上代碼，呈現(xiàn)的效果是我想要的效果，就是鼠標(biāo)移入離開(kāi)都過(guò)渡很平緩，但我將transition: 0.35s all;從img{}標(biāo)簽移到hover里如下：（則效果不是我想要的，鼠標(biāo)移入后過(guò)渡平緩，可鼠標(biāo)離開(kāi)后幾乎沒(méi)有平緩過(guò)渡效果，我的問(wèn)題是兩種位置設(shè)置呈現(xiàn)不同的效果的原因是什么，有什么講究呢，謝謝）

img{ opacity: 0.5; }img:hover{ opacity: 1; margin-left: -50px; transition: 0.35s all;}<img src='http://m.b3g6.com/wenda/img/1.jpg'>

問(wèn)題解答

第一種 img 一直 有 transition 屬性， mouseover transtion 變化， mouseout transition 回復(fù)第二種， 只有mouseover 才有 transition 屬性， 所以 mouseover transition 變化， mouseout 沒(méi)有 transition屬性， 直接就變到結(jié)果了

其實(shí)就是樣式選擇器能否匹配的問(wèn)題：img標(biāo)簽無(wú)論鼠標(biāo)是否懸停在其上都能匹配img{}選擇器，只有鼠標(biāo)移入img時(shí)才能匹配img:hover{}選擇器；

當(dāng)元素?fù)碛衪ransition：all;屬性并且其他屬性發(fā)生變化

才會(huì)有緩動(dòng)效果。第一種情況transition：all;在img{}選擇器下，無(wú)論當(dāng)鼠標(biāo)移入移出img都能匹配transition：all;第一個(gè)條件滿足；另外移入移出時(shí)margin變化了，第二個(gè)條件滿足，所以移入移出都會(huì)緩動(dòng)。

第二種情況移入移出都滿足margin變化，但是只有鼠標(biāo)移入img能匹配到transition：all;，所以，第二種情況只有鼠標(biāo)移入時(shí)才會(huì)發(fā)生緩動(dòng)。