問(wèn)題描述

如下鏈接的第一個(gè)tababr，有點(diǎn)拖尾巴的跟進(jìn)，怎么實(shí)現(xiàn)的？https://vux.li/demos/v2/?x-pa...

問(wèn)題解答

對(duì)left和right cubic-bezier 如果向左就left先快后慢，right先慢后快;如果是向右就left先慢后快，right先快后慢

css3 transition實(shí)現(xiàn)的動(dòng)畫效果

自己解決了，用的transition，每個(gè)item選中的時(shí)候border-bottom顯示，然后再加一個(gè)bottom-bar用最普通的移動(dòng)就是那種效果， 不需要很難的樣式。

分析文檔結(jié)構(gòu)：底部橙色bar是獨(dú)立的p,并且是相對(duì)于父元素的絕對(duì)定位通過(guò)點(diǎn)擊事件確定橙色bar的right值，使用js動(dòng)態(tài)修改。其次向該p添加transition屬性，達(dá)到預(yù)期效果