JSFiddle - React, Tailwind, and code Playground

by piotr_cz

HTML

<script src="http://github.com/SunboX/mootools-fx-tween-css3/raw/master/Source/Fx.Tween.CSS3.js"></script>
<div id="wrapper">
    <div id="test">
        click here to test tween
    </div>
</div>

CSS

#wrapper {
    height: 300px;
    width: 100%;
    border: 1px dashed blue;
}
#test {
    font-family: Verdana, Arial;
    color: #fff;
    background: lime;
    height: 33%;
    padding: 0px;
    cursor: pointer;
}

JavaScript

window.addEvent('domready', function(){
    var fx = new Fx.Tween.CSS3('test', {
        duration: 605,
        unit: "%", // ignored
        transition: 'quint:in'
    });
    fx.addEvent('complete', function(){
        alert('complete');
    });
    
    var to = 100;
    $('test').addEvent('click', function(){
        //fx.start('height', 100, 300);
        fx.start('height', (to == 33 ? (to = 100) : (to = 33)));
        //fx.cancel.delay(200, fx);
    });
})