作者azrael60532 (Kevin)
看板Web_Design
標題[問題] Vue-篩選功能練習
時間Tue Jul 17 15:47:50 2018
問題是這樣的
小弟最近剛開始學Vue
想說寫個簡單的篩選功能
功能是有了，只是我想加上淡入淡出的效果就失敗了
我是用Bootstrap的grid + Vue
grid的部分用v-for跑迴圈 還是有更好的做法
還請各位前輩批評指教
期望效果:
切換類別時將目前畫面的圖淡出後再把切換到的圖片淡入進來
附上小弟練習的code
https://goo.gl/HFf2Qw
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 220.132.226.51
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1531813673.A.EBE.html
1F：→ fukinhot: fadein fadeout css要自己寫, vuejs 有提供transition 07/17 20:16
2F：→ fukinhot: 的component給你包, 會給你各時機的class用, ，資訊請 07/17 20:16
3F：→ fukinhot: 谷歌 vuejs enter/leave & list transitions 07/17 20:16
4F：→ azrael60532: 我有試過用<transition></transition>包起來 07/17 21:47
5F：→ azrael60532: 也有自己寫CSS 可是它只有淡入有效果 淡出沒有 07/17 21:49
6F：→ azrael60532: 因為v-show的關係grid直接display:none 就沒有效果了 07/17 21:50
7F：→ fukinhot: 睡前十分鐘幫你小改一下 codepen.io/chaoliou/pen/xJOVj 07/17 23:35
8F：→ fukinhot: 這個才對 codepen.io/chaoliou/pen/xJOVjm 07/17 23:36
9F：→ azrael60532: 感謝大大幫忙 可是這樣有個問題就是 07/18 12:38
10F：→ azrael60532: 你選狗或是兔子的時候 前面會空下來 grid不會消失 07/18 12:39
11F：→ fukinhot: 那是為了方便我確認淡入淡出的 07/18 19:33