PTT數位生活區 / Web_Design

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

看板Web_Design作者 (Kevin)時間7年前 (2018/07/17 15:47), 編輯推噓0(0推 0噓 11→)
留言11則, 2人參與, 7年前最新討論串1/1
問題是這樣的 小弟最近剛開始學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
→
07/17 20:16, 7年前 , 1F
fadein fadeout css要自己寫, vuejs 有提供transition
07/17 20:16, 1F
→
07/17 20:16, 7年前 , 2F
的component給你包, 會給你各時機的class用, ，資訊請
07/17 20:16, 2F
→
07/17 20:16, 7年前 , 3F
谷歌 vuejs enter/leave & list transitions
07/17 20:16, 3F
→
07/17 21:47, 7年前 , 4F
我有試過用<transition></transition>包起來
07/17 21:47, 4F
→
07/17 21:49, 7年前 , 5F
也有自己寫CSS 可是它只有淡入有效果 淡出沒有
07/17 21:49, 5F
→
07/17 21:50, 7年前 , 6F
因為v-show的關係grid直接display:none 就沒有效果了
07/17 21:50, 6F
→
07/17 23:35, 7年前 , 7F
睡前十分鐘幫你小改一下 codepen.io/chaoliou/pen/xJOVj
07/17 23:35, 7F
→
07/17 23:36, 7年前 , 8F
這個才對 codepen.io/chaoliou/pen/xJOVjm
07/17 23:36, 8F
→
07/18 12:38, 7年前 , 9F
感謝大大幫忙 可是這樣有個問題就是
07/18 12:38, 9F
→
07/18 12:39, 7年前 , 10F
你選狗或是兔子的時候 前面會空下來 grid不會消失
07/18 12:39, 10F
→
07/18 19:33, 7年前 , 11F
那是為了方便我確認淡入淡出的
07/18 19:33, 11F
‣ 更多 azrael60532 的文章
文章代碼(AID): #1RJPyfw- (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 azrael60532 的文章
文章代碼(AID): #1RJPyfw- (Web_Design)