vuejs實現摺疊面板展開收縮動畫

2021-09-04 05:14:14 字數 435 閱讀 7104

vuejs通過css3實現元素固定高度到auto高度的動畫和auto高度到固定高度的動畫。

迴圈列表,html:

在css上加上動畫transition

.newslist ul li p
重點是下面js的實現:

分為兩種情況:

(一)初始狀態是收縮時:

(二)初始狀態是展開時:

稍微改動:

var height = licon.offsetheight  // 也可以是licon.getboundingclientrect().height

if (height === this.liconheight) else

vuejs實現摺疊面板展開收縮動畫

vuejs通過css3實現元素固定高度到auto高度的動畫和auto高度到固定高度的動畫。迴圈列表,html 在css上加上動畫transition newslist ul li p重點是下面js的實現 分為兩種情況 一 初始狀態是收縮時 二 初始狀態是展開時 稍微改動 var height lic...

vuejs實現摺疊面板展開收縮動畫

vuejs通過css3實現元素固定高度到auto高度的動畫和auto高度到固定高度的動畫。迴圈列表,html 在css上加上動畫transition newslist ul li p重點是下面js的實現 分為兩種情況 一 初始狀態是收縮時 二 初始狀態是展開時 稍微改動 var height lic...

jquery實現文章內容展開收縮

小蝸牛問媽媽 為什麼我們從生下來,就要揹負這個又硬又重的殼呢?媽媽 因為我們的身體沒有骨骼的支撐,只能爬,又爬不快。所以要這個殼的保護!小蝸牛 毛蟲姊姊沒有骨頭,也爬不快,為什麼她卻不用背這個又硬又重的殼呢?媽媽 因為毛蟲姊姊能變成蝴蝶,天空會保護她啊。小蝸牛 可是蚯蚓弟弟也沒骨頭爬不快,也不會變成...