在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vue transition過渡效果

vue transition過渡效果

我在做模擬餓了么的過程中，遇到了兩個(gè)動(dòng)畫效果都無法實(shí)現(xiàn)預(yù)期的效果。一個(gè)就是在商品列表頁加入購物車的過程中，小球到購物車的一個(gè)動(dòng)畫，內(nèi)層實(shí)現(xiàn)了向x軸的移動(dòng)，但是展示效果上卻只是一個(gè)y軸的變化；另個(gè)一個(gè)動(dòng)畫效果是 點(diǎn)擊購物車的時(shí)候，會(huì)有一個(gè)向上的彈框。但是實(shí)際上，我設(shè)置transition3d(0,-100%,0)時(shí)，出現(xiàn)了在這個(gè)v-show為true的情況下，v-enter-active v-leave-active class被移除。我特別困惑，我把彈框提出來在一個(gè)獨(dú)立的頁面調(diào)試，是沒有問題的，說明應(yīng)該是本頁面的某一個(gè)東西影響了這個(gè)動(dòng)畫。但是苦于自己能力的問題，調(diào)試了很久也沒有得到解決，希望得到大家的幫助。
這個(gè)是我的項(xiàng)目地址https://github.com/chenqing20...

回答
編輯回答
替身

球的問題

  1. 不要用可能相同的值去綁定key。
  2. inner-hook應(yīng)該是以el為根去取，即el.querySelector或el.getElementxxxxx?？赡苁?code>transition組件機(jī)制的問題也可能是key的問題，導(dǎo)致你取到的inner-hook是實(shí)際過渡的el后一個(gè)元素的。
  3. 感覺你的balls數(shù)組沒起什么作用，可能是有些邏輯沒理清楚。

購物車的問題

  1. transition動(dòng)畫的樣式只負(fù)責(zé)過渡過程中的，不負(fù)責(zé)過渡前后的。所以你要把transition3d(0,-100%,0)加到常態(tài)樣式里。
  2. 接上一條，transition樣式正常就是會(huì)被移除。其中的enter并不是只進(jìn)入之后的樣式，而是過渡過程中的完成進(jìn)入過渡時(shí)的最終臨界點(diǎn)的狀態(tài)，過渡結(jié)束就沒了。leave同理。

其他問題

好像你有些添加的數(shù)據(jù)被共用了，導(dǎo)致各商品添加的時(shí)候會(huì)同增同減？沒細(xì)看是哪的原因，v-for綁定key是個(gè)好習(xí)慣。同樣，盡量不要用可能相同的值(比如你的初始都是false)去綁定，盡量不要用index去綁定(在列表增刪的時(shí)候可能會(huì)有問題)，盡量使用數(shù)據(jù)的id或盡可能不會(huì)相同的值去綁定。

2017年2月14日 12:55