Hello, I noticed a bug with Interactions. Specifically with animation. I have the effect of the appearance of a block in which conditions are prescribed depending on the localStorage data. And when the conditions are not met, the animation does not start. And this is correct, as it should be. But the problem is that if the animation does not start, then the block is not visible due to opacity 0. |333x120
As I understand it, this is due to the fact that bricks adds the opacity 0 class for animation and then the animation overlaps it with opacity 1. But now it does not take into account whether the animation will start (whether it satisfies the condition) and always adds a class. Because of this, if the animation does not start, then opacity 0 is saved.
Your understanding is correct. The opacity is set to 0 by default for elements with some animations (those that include āInā in the name like āfadeInUpā, āslideInUpā, etc.), and itās supposed to be overridden when the animation starts. However, if the animation doesnāt start due to unmet conditions, the opacity remains at 0, causing the element to stay invisible.
So itās a bit tricky since opacity 0 is needed initially for those animations and the check happens on the client. Thereās no perfect solution but maybe we can reset the opacity to 1 if the conditions are not met using JS this might cause some flickering though. I created a ticket to look into this more.
Hello, specifically in my case, I fixed this bug using css media queries for max-width: 768px opacity: 1 !important.
Because I have a condition that checks for the width of the screen and is executed only when it is greater than 768 px. This crutch helped, but I would like something right. I also want to suggest adding a check to the device in condition. Since it is often necessary to perform animations only on a PC or only on a phone.
Thanks