瀏覽代碼

add fade in on product sort

master
azri 6 天之前
父節點
當前提交
cc5bead316
共有 1 個檔案被更改,包括 10 行新增3 行删除
  1. 10
    3
      src/components/ProductList/ProductList.jsx

+ 10
- 3
src/components/ProductList/ProductList.jsx 查看文件

@@ -71,11 +71,14 @@ const ProductList = ({ size = 99999 }) => {
71 71
   useEffect(() => {
72 72
 
73 73
     console.log("Products: ", products)
74
-    
74
+
75 75
     if (products.length > 0) {
76 76
 
77 77
       let newFilteredProducts = filterProducts()
78
-      setFilteredProducts(newFilteredProducts)
78
+      setFilteredProducts([])
79
+      setTimeout(() => {
80
+        setFilteredProducts(newFilteredProducts)
81
+      }, 100);
79 82
 
80 83
       const tagList = getAllTags(newFilteredProducts);
81 84
       setTagFilterOption(tagList);
@@ -99,7 +102,11 @@ const ProductList = ({ size = 99999 }) => {
99 102
   useEffect(() => {
100 103
 
101 104
     let newFilteredProducts = filterProducts()
102
-    setFilteredProducts(newFilteredProducts)
105
+    setFilteredProducts([])
106
+    setTimeout(() => {
107
+      setFilteredProducts(newFilteredProducts)
108
+    }, 100);
109
+
103 110
 
104 111
   }, [tags, collection, sort])
105 112
 

Loading…
取消
儲存