So I was playing with a search box, I wanted it to show/hide based on the content and whether it was focused or not, but I did not want to use width property for animation. Instead I went for transform: translate and tried to hide it behind the button when not needed.
I've noticed a weird behaviour though. When I hover over the element the box seems to render properly, but when I try to tab into it, the button starts to 'jump' and if you try clicking somewhere else on the page while the animation is running, the whole thing will just freeze, with the button staying in incorrect place.
Here is the code pen: https://codepen.io/anon/pen/vwqZxR
Top comments (0)