I have a textfield with some text. Upon focusing (so using a focus listener), I want the text to animate by shrinking out of the textfield and becoming a caption directly above the textfield. Does anyone have any ideas how this would be possible? Thanks, and if anyone has time, can someone produce a simple working example of this? I’m sorry, I am quite new at Vaadin 
Thanks!
That may be possible with
CSS animations
that start upon focus. You need to animate the position of the caption. You may need to use a FocusListener to apply a style name that starts the animation. The TextField does get a style name indicating focus, but you might not be able to use that to match the animation rule to the caption, as the caption is not inside the TextField’s element, but managed by the layout.
I didn’t quite understand what is the text in the TextField. Is it the value? If so, moving the value to caption doesn’t make sense. Or is it more like the input prompt - a sort of a caption that is placed inside the field before getting focus?
Right I was thinking of using CSS animations. The only problem is the Vaadin behind it…
So right now I have a textfield called username, with the value of the textfield (not the caption) set to username. When the user focuses on the field, as you said, I want the username to move out of the “value area” and go to the caption; i think thats the input prompt you were speaking of in the last line…
Now this is something kind of trivial -_-, but i think the main idea is to learn as much as possible about the framework in the case. By the way, this is all part of the login screen. To see where I got this idea, I suggest go to the koding.com sign in page, and start typing in the username field…the animation may not be obvious at first, but if you focus on the field and unfocus itll become clear…
Thanks for your help!
By the way, if I sound kind of ignorant, I am sorry. I am quite new to the Vaadin framework and only in high school. I have a lot to learn for sure