CODEWITHSUNDEEP
cssmobilecss-transitions
cmegown
cmegown

Reputation: 401

CSS3 transition on focus, not quite right

I'm working on a mobile project and I'm trying something out. To get started, check out my simple pen and I'll explain what I'm trying to accomplish.

The user will almost always hit the search page, and when they enter a search term I want the input:focus to launch a transition that will shrink the input box and slide in a button to clear the text. Then if the user chooses, the button would clear any entered text and maintain focus on the element. Unfortunately the jQuery I'm using to maintain focus makes the transition jitter a bit and isn't very usable.

This is really only my first crack at this, but I'm curious to hear what others have experienced when trying to get this same type of effect working. Feedback, tips, and advice are all welcome :) thanks!

Upvotes: 3

Views: 330

Answers (2)

cmegown
cmegown

Reputation: 401

A little more tinkering and I found a suitable solution that doesn't stray too far from my original snippet which I have updated:

http://codepen.io/cmegown/pen/lDqHc

I realized that after the initial search, the user might find it useful to be able to click the 'clear' button and automatically be taken to an empty search box and ready to type a new search term. So I kept the transitions and removed the CSS redeclaring the original width/margin values to avoid the transition "flickering" when tapping the button. I then wrote another JS snippet to declare the changed width/margin values so that the transition only happens once - which actually works out better than my original intentions.

It's not perfect, and it's certainly not clean - so any further tips/advice are welcome!

Upvotes: 0

Tyler Crompton
Tyler Crompton

Reputation: 12662

The input field loses focus in order for the link to handle the event, so the field transitions back to its original state (read: weird behavior). The only solution I can come up with (without adding more JavaScript) is to add a slight delay. But honestly, if you use a little JavaScript, why not go all the way since it's more supported than CSS 3 right now? http://codepen.io/cmegown/pen/lDqHc

Upvotes: 2

Related Questions