Animating the Display

The next step is to have some kind of animation when the images are ready to be viewed, such as the whole panel sliding into view.

We can achieve this easily by adding a CSS rule that tells formsPlayer to slide down a case when it receives the xforms-select event.

the following to the end of flickr.css:

xf\:case
{
  -event-xforms-select   : fx-Effect-SlideDown(duration:1);
}

Note that there is a bug in Internet Explorer which gives us a slight flicker before the animation begins. We can work around this by overriding the default rule that hides deselected cases, and replacing it with a rule that performs a slide up on receiving the event xforms-deselect. The resulting CSS is:

xf\:case
{
  -event-xforms-deselect : fx-Effect-SlideUp(duration:0);
  -event-xforms-select   : fx-Effect-SlideDown(duration:1);
}

Now, whenever an XForms case element receives the xforms-select event, a slide-down animation will be initiated, set to take 1 second. Similarly, whenever the xforms-deselect event occurs, a slide-up animation will be initiated.

Save the form, refresh and try searching; once the results are available they should slide into view, and each time you try a new search the previous results should be immediately hidden, before the new ones slide in again.