JSFiddle - React, Tailwind, and code Playground

by kentaromiura

CSS

div{
    border:1px solid black;
    width:8em;
    margin:1em;
    height:0;
    display:inline-block;
    background-color:black;
}

JavaScript

Fx.All = new Class({
    Extends: Fx,
    initialize: function(elements, options) {

        this.elements = elements;
        this.setOptions(options);

        var what = this.what = this.options.what;
        for (var prop in what) {
            var start = what[prop][0],
                diff = what[prop][1] - start;
            this.what[prop] = {
                start: start,
                diff: diff / 100
            };
        }

    },
    go: function() {
        this.start(0, 100);
    },
    set: function(value) {
        var what = this.what,
            delta = this.options.delta;
        this.elements.each(function(element) {
            for (var prop in what)
            element.setStyle(prop, what[prop].start + what[prop].diff * value);
        });
    }
});

/*I'll create 300 divs*/
    for(var i=0,max=300;i<max;i++){
    new Element('div').inject(document.documentElement);    
    }

new Fx.All($$('div'), {
          what:{
              height: [1, 25],
              opacity: [1, 0.5]
          },
          duration: 2000
      }).go();