作者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://www.ptt.cc/bbs/Web_Design/M.1531813673.A.EBE.html
→ fukinhot: fadein fadeout css要自己寫, vuejs 有提供transition 07/17 20:16
→ fukinhot: 的component給你包, 會給你各時機的class用, ,資訊請 07/17 20:16
→ fukinhot: 谷歌 vuejs enter/leave & list transitions 07/17 20:16
→ azrael60532: 我有試過用<transition></transition>包起來 07/17 21:47
→ azrael60532: 也有自己寫CSS 可是它只有淡入有效果 淡出沒有 07/17 21:49
→ azrael60532: 因為v-show的關係grid直接display:none 就沒有效果了 07/17 21:50
→ fukinhot: 睡前十分鐘幫你小改一下 codepen.io/chaoliou/pen/xJOVj 07/17 23:35
→ fukinhot: 這個才對 codepen.io/chaoliou/pen/xJOVjm 07/17 23:36
→ azrael60532: 感謝大大幫忙 可是這樣有個問題就是 07/18 12:38
→ azrael60532: 你選狗或是兔子的時候 前面會空下來 grid不會消失 07/18 12:39
→ fukinhot: 那是為了方便我確認淡入淡出的 07/18 19:33