3

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!

4

2 に答える 2

2

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

于 2013-01-03T16:24:32.210 に答える
0

もう少しいじくり回して、更新した元のスニペットからそれほど離れていない適切なソリューションを見つけました。

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

最初の検索後、ユーザーは「クリア」ボタンをクリックすると自動的に空の検索ボックスに移動し、新しい検索用語を入力できるようになると便利だと気づきました。そこで、トランジションを保持し、ボタンをタップしたときにトランジションが「ちらつく」のを避けるために、元の幅/マージン値を再宣言するCSSを削除しました。次に、変更された幅/マージン値を宣言する別のJSスニペットを作成して、遷移が1回だけ発生するようにしました。これは、実際には元の意図よりもうまく機能します。

それは完璧ではありません、そしてそれは確かにきれいではありません-それでそれ以上のヒント/アドバイスは大歓迎です！

于 2013-01-03T17:35:46.867 に答える