One of the little things I like about Android is the “toast.” If you are not familiar with the toast, it is the little transparent notice you get that operations are done. The best example is the toast that tells you how long you will have to sleep before your alarm goes off. (Pictured here.)
I really like the concept. It usually short-circuits the whole item editing process.
Without toasts:
- Click save button.
- Get feedback that item has been saved.
- Manually go back to previous screen.
With toasts:
- Click save button & go back & get feedback.
I wanted to implement toasts in an HTML PhoneGap application. Now I know I could do this with just JavaScript, or with jQuery, but I really wanted to give CSS transitions a try. CSS transitions allow you to alter a CSS property over a set period of time. They work really well for this sort of case.
So the first thing I have to do is apply the transition.
You’ll notice a couple of things here. One the syntax for the transform is pretty simple:
http://snipplr.com/js/embed.js
http://snipplr.com/json/62077
[browser css keyword]: [property to animate] [duration] [easing method]
Once you do that, the rest is really simple. Basically, all you have to do is change the value for the property you have added a transform to, and the browser takes care of the rest. So to fade out my toast, I set the opacity to 0. That’s it.
http://snipplr.com/js/embed.js
http://snipplr.com/json/62078
See the demo.
Why do I like this:
- I always prefer doing visual things in CSS.
- This seems to me to be simpler than using JavaScript animations
- CSS transitions will be hardware accelerated on environments that support doing so.
Now, I have to tell you there are caveats:
- It doesn’t work in IE
- I’m sure someone who knows more than I will put more in the comments
But it does work within the mobile browsers I tested on iOS and Android, which means I’m free to use this in my PhoneGap application.
tpryan.blog 
Terry, I’m trying to wrap my head around this. Am I right in thinking that the “good stuff” CSS is creating a duration for changes? What I mean is – it seems like you define the property to watch, opacity, a time, and a type of transition. Once you do that, ANY change then uses this for animation.
Right? So if you changed from 0.9 to 0.2, you would get the same behavior.
Basically it’s a way of saying, if you change X (from anything to anything), use this animation.
Right?
LikeLike
Just looked at the gray box again … and it makes more sense now. Great demo, Terry. Thanks.
LikeLike
If you truly need a toast similar to the one in Android, you should add pointer-event:none; to the css. This prevents interaction of the Toast with other elements on the page, in terms of clicks.
LikeLike