animation changement d'ordre OK

src/css/Components/sort.css

@@ -19,23 +19,14 @@
     }
         
         #sortOrder{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
             color: white;
             font-family:'Wellfleet',cursive;
-            font-size: 1.2vw;
+            font-size: 1.4vw;
             cursor: pointer;
         }
-        
-        /* #sortOrder:hover {
-            animation: rotate180 2s forwards
-        }
-        
-        .letter {
-            animation: rotate180 2s forwards;
-        } */
-
-        #sortOrder>span {
-            animation : rotate180 2s forwards
-        }
 
         @keyframes rotate180 {
             0% {}

src/js/Components/Sort.js

@@ -27,26 +27,14 @@ class Sort extends Component {
     setOrderText() {
         switch(this.state.sortType) {
             case "name":
-                if (this.props.lowToHigh) {
-                    this.setState({
-                        orderText: "a-z"
-                    })
-                } else {
-                    this.setState({
-                        orderText: "z-a"
-                    })
-                }
+                this.setState({
+                    orderText: "A-Z"
+                })
                 break;
             case "price":
-                if (this.props.lowToHigh) {
-                    this.setState({
-                        orderText: "0-9"
-                    })
-                } else {
-                    this.setState({
-                        orderText: "9-0"
-                    })
-                }
+                this.setState({
+                    orderText: "0-9"
+                })
                 break;
             default:
                 break;
@@ -63,25 +51,32 @@ class Sort extends Component {
     }
 
     handleChangeSortOrder() {
-        let letters = document.getElementsByClassName("letter")
-        let sortText = document.getElementById("sortOrder")
+        let letters = document.querySelectorAll('.letter');
+        let sortText = document.getElementById("sortOrder");
+
         //animation du texte entier
         if (this.state.flipped) {
             sortText.style.cssText = "animation: reverse180 1s forwards"
+            letters.forEach((l) => {
+                l.style.animation = "reverse180 0.5s forwards"
+            });
         } else {
             sortText.style.cssText = "animation: rotate180 1s forwards"
+            letters.forEach((l) => {
+                l.style.animation = "rotate180 0.5s forwards"
+            });
         }
-        //animation de chaque lettre
-        for (let i = 0 ; i<letters.length ; i++) {
-            letters[i].style.animation = "rotate180 1s forwards"
-        }
+        
         this.setState({flipped : !this.state.flipped})
+
+        //actualisation de l'ordre d'affichage des produits
         setTimeout(() => {
             this.props.handleChangeSortOrder();
         }, 500)
     }
 
     render() {
+        console.log(document.getElementById("sortOrder"))
         // console.log(this.state.orderText)
         // console.log(this.state.orderText.split(""))
         // console.log(document.getElementById("sortOrder"))
@@ -103,7 +98,7 @@ class Sort extends Component {
                     </div>
                     <p id="sortOrder" onClick={this.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
                         {this.state.orderText.split("").map((l) =>
-                            <span className="letter">{l}</span>
+                            <div className="letter">{l}</div>
                         )}
                     </p>
                 </div>