JSFiddle - React, Tailwind, and code Playground

by kikkoma

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>
<div id="bg">
<div id="container"></div>
</div>

CSS

#container{
    width:100px;
    height:100px;    
    border:solid 1px black;
}

#bg{
    backGround-color:white;
}

JavaScript

var stage = new Kinetic.Stage({
        container: 'container',
        width: 100,
        height: 100
    });

var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 100,
        height: 100,
        opacity:1
    });

    var rect2 = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 100,
        height: 100,
        Fill:'#9999FF',
        opacity:0
    });

layer.add(rect);
layer.add(rect2);

 var tween = new Kinetic.Tween({
        node: rect2,
        duration: 0.2,
        opacity: 0.4,
        easing: Kinetic.Easings.StrongEaseOut
    });

    layer.on("mouseenter", function() {
        tween.play();
    });

    layer.on("mouseleave", function() {
        tween.reverse();
    });

    layer.on("click", function() {
        rect.setFill("rgba(100,0,0,0.5)");
        group.draw();
    });

stage.add(layer);