Uploaded image for project: 'Wicket'
  1. Wicket
  2. WICKET-5297

Animate ajax DOM manipulation smoothly

    XMLWordPrintableJSON

Details

    • Improvement
    • Status: Open
    • Minor
    • Resolution: Unresolved
    • None
    • None
    • None

    Description

      Wicket should have an easy hands-off way to animate most changes which occur when ajax requests get new HTML data to visualize in the markup. For instance, the content within the element (if any) could fade or shrink away, and new content would replace it, taking its place.

      The animations should be as minimal as possible, but noticeable enough that the user can see them occurring. I'd suggest at least two types of animations: fade-ins and resizes.

      • In fade animation, the old panel would have its opacity decrease until it becomes invisible, and the new content would then take its place. In case the old panel was just a placeholder, only the fade-in of the new content occurs. This type of animation would be suitable for alert box like elements which occur in the middle of the screen or otherwise are detached from the page flow.
      • In resize animation, JavaScript code should measure the dimensions of the old panel (about to go away) and the new panel (about to replace it). During animation, the old panel would be kept in its place, but its dimensions would be adjusted from the old values to the new values through manipulating its width and height using linear interpolation, and then an instantenous switch would replace the old content with the new content when the new dimensions have been reached. If the old panel was just a placeholder, the animation would resize the content of the new panel instead. This type of animation would be most suitable for elements in the page flow.

      User should be able to control the duration and type of the animation, and whether animation is applied by default via settings. In addition to that, the animation parameters should be controllable per ajax request.

      Attachments

        1. wicket6-replace-with-effect.tgz
          133 kB
          Martin Tzvetanov Grigorov
        2. wicket6-replace-with-effect.tgz
          133 kB
          Martin Tzvetanov Grigorov
        3. wicket6-replace-with-effect.tgz
          143 kB
          Martin Tzvetanov Grigorov

        Issue Links

          Activity

            People

              mgrigorov Martin Tzvetanov Grigorov
              alankila@bel.fi Antti Lankila
              Votes:
              1 Vote for this issue
              Watchers:
              7 Start watching this issue

              Dates

                Created:
                Updated: