I have created a perspective view template with a shape, and I want to dynamically change the border's flashing behavior based on a Boolean signal. When the signal is true, the border should flash in red continuously. Conversely, when the signal is false, it should flash in green for 10 seconds.
To achieve this, I've implemented two animated styles: one for the true state (red flashing) and one for the false state (green flashing for 10 seconds). Initially, the implementation works well during the browser session when the signal is true because it continues to flash until the state changes to false.
However, the issue arises when the signal is false. In this case, the border flashes green for the intended 10 seconds upon initial load, but upon refreshing the page or navigating back to it, the border starts flashing green again for another 10 seconds if the Boolean signal remains false. This repetitive flashing upon page reload or navigation back is not ideal. Is there any way to fix this issue?
