Currently facing an interesting challenge, but I'm confident there's a clever solution out there.
The issue at hand is with a table that has three different sorting states for its columns: unsorted, where no icon should be displayed, ascending, marked by an up arrow, and descending, indicated by a down arrow.
Clicking on the column header should cycle through these three states.
starts off => click => ascending => click => descending => click => back to offAll of this functionality works smoothly, except for one requirement - I need to use the same Caret element and apply CSS transitions to animate it from opacity: 0 to opacity: 1, then rotate it 180deg on click to show a downward arrow for descending sorting. However, when removing the sort, I want the Caret to fade out without rotating back to 0 degrees.
This specific aspect is posing a challenge for me.
EDIT
I have replicated the behavior in a sandbox, but in reality, I am utilizing react-table, which only offers three potential states being controlled by the package:
initial state: {showCaret: false, flipped: false}
first click: {showCaret: true, flipped: false}
second click: {showCaret: true, flipped: true}
third click, back to initial: {showCaret: false, flipped: false}
The transition between these states is managed by react-table, so setting a setTimeout on the flipped variable is not feasible.
I am seeking a purely CSS-based solution to achieve this goal without altering the state transitions, if possible.
END EDIT
I have included a codesandbox link for demonstration purposes. Click Show Caret first, then Flip Caret, followed by Hide Caret. The CSS setup here mirrors what I have implemented in my actual project as well.
https://codesandbox.io/embed/admiring-rain-svsc9?fontsize=14&hidenavigation=1&theme=dark