FuncyTown Example 13

example13_animate_inout - use "funcyStyle" and oninit()" for box grow-in and shrink-out effects

Raw HTML output:

Raw CSS output:

To Notice: css3 animations (on box "add" and box "remove") have been added to the previous example. This is done by first adding animation properties to the '.box' style in build_example_css(), like so:

 function build_example_css() {

    function multibrowser_transitions(transitions)  // return css properties for many different browsers
    {
        return { '-webkit-transition': transitions,
                    '-moz-transition': transitions,
                     '-ms-transition': transitions,
                      '-o-transition': transitions,
                         'transition': transitions };
    }

    var specs = ' ' + boxAnimateTime + 'ms linear';
    funcyStyle( '.box', multibrowser_transitions('height' + specs + ', width' + specs + ', margin' + specs),
                { borderStyle:'solid',
                  width_px:0,
                  height_px:0,
                  ...

which leads to these additional properties in the css:

  -webkit-transition:height 333ms linear, width 333ms linear, margin 333ms linear;
  -moz-transition:height 333ms linear, width 333ms linear, margin 333ms linear;
  -ms-transition:height 333ms linear, width 333ms linear, margin 333ms linear;
  -o-transition:height 333ms linear, width 333ms linear, margin 333ms linear;
  transition:height 333ms linear, width 333ms linear, margin 333ms linear;
  width:0px;
  height:0px;

(note also the width and height are now zero) for ".box". Next, this new css is defined with funcyStyle:

  funcyStyle( '.box.fullsize',
              { width_px:boxSize,
                height_px:boxSize,
                margin:0 } );

creating this css:

.box.fullsize {
  width:80px;
  height:80px;
  margin:0;
}

Finally, the special oninit() method, which is unique to FuncyTag (as is onterm()), is called after a funcyTag has been rendered. oninitadds the "fullsize" class to the element, triggering the animations.

When the "remove" button is pressed, two things happen. First, the "fullsize" class is removed, triggering the animation back to size 0, and then the dom element is removed from the page.

Please notice that the animation time (which is done in css) and the remove-element time (which is done in javascript), are both tied to the javascript variable "boxAnimateTime"-- solving the general problem of how to share variables between css and javascript.

next: example14_funcystyle_variables top: all js examples