I came to report a little bug that occurring when I use interaction transitions. Sometimes when I hover a element the smoth transition seems not work and make a hard transition, as you can see in the third and second block below. It’s happen in other projects too.
I witness that too, but I consider that sometimes it only happens in the designer, and when it happens in the published site, usually it’s only for me. Doesn’t happen on another computer etc. Like if it was a cache issue.
I thought that could be a conflict with the css transition and the interaction transition but it’s not. I remove the css transition but nothing changes.
I discover when it happens but not how to fix it. Is when I set the div hight to “auto” on hover interactions. If I set a fixed value to height it not happen anymore but my div cannot be fixed height because the content is different in every box.
This seems to be a problem with CSS as you can’t animate to “auto”. The current hack would be to set a max height and animate the max-height to a large value (e.g.: height of largest element).
I remove the interaction and set just the css transition.
On normal state I set the max-height: 0 (or minimum of height that I need) and on hover I set max-height to the maximum of my block will be (like 400px).
Hey @douglasrpinho I believe the jumping interaction may be happening because when you go back to the hover over effect, the starting point has moved after the interaction has taken place.
Maybe try adding an additional step with 0ms set to the initial height of the element (in this case 26px) so that it matched the hover out height of 26px. Please let me know if this solves the problem, if not, I’m happy to help further
I follow your tips but instead of 0ms I set to 50ms and the problem seems to be solved! With 0ms the “jumping” still happening but in less frequency, so setting a little delay it is not happening anymore.