[問題] Vue-篩選功能練習 azrael60532 PTT批踢踢實業坊

[問題] Vue-篩選功能練習

作者: azrael60532 (Kevin) 2018-07-17 15:47:50

問題是這樣的
小弟最近剛開始學Vue
想說寫個簡單的篩選功能
功能是有了，只是我想加上淡入淡出的效果就失敗了
我是用Bootstrap的grid + Vue
grid的部分用v-for跑迴圈還是有更好的做法
還請各位前輩批評指教
期望效果:
切換類別時將目前畫面的圖淡出後再把切換到的圖片淡入進來
附上小弟練習的code
https://goo.gl/HFf2Qw

作者: fukinhot (抱歉粗口我怕熱) 2018-07-17 20:16:00

fadein fadeout css要自己寫, vuejs 有提供transition的component給你包, 會給你各時機的class用, ，資訊請谷歌 vuejs enter/leave & list transitions

作者: azrael60532 (Kevin) 2018-07-17 21:47:00

我有試過用<transition></transition>包起來也有自己寫CSS 可是它只有淡入有效果淡出沒有因為v-show的關係grid直接display:none 就沒有效果了

作者: fukinhot (抱歉粗口我怕熱) 2018-07-17 23:35:00

睡前十分鐘幫你小改一下 codepen.io/chaoliou/pen/xJOVj這個才對 codepen.io/chaoliou/pen/xJOVjm

作者: azrael60532 (Kevin) 2018-07-18 12:38:00

感謝大大幫忙可是這樣有個問題就是你選狗或是兔子的時候前面會空下來 grid不會消失

作者: fukinhot (抱歉粗口我怕熱) 2018-07-18 19:33:00

那是為了方便我確認淡入淡出的

繼續閱讀

[問題] wordpress安裝demo data 卻卡住forsaxon [問題] 如何在github架設的網站做分頁PhysicsMAGI [問題]html轉換成jsp遇到問題falink Re: [問題] 現在的wordpress還是用php嗎?nottt [問題] 現在的wordpress還是用php嗎?nosmraw [問題] js創建一元素給標籤和class[解決]qw050123 [問題] 先淘汰cache or 先寫db ?sean72 [問題]CODEPEN無法引進SASS??moodoa3583 [問題] SVG的PATH畫圓弧nacoyow [問題] 這段css的意思aliensu