JSFiddle - React, Tailwind, and code Playground

by Christian Meixner

HTML

<script src="//unpkg.com/[email protected]"></script>
<div id="demo"></div>
<script id="tmpl" type="text/template">
<button on-click="@this.toggleVisible()">Toggle Visible</button><br>
<button on-click="@this.changeColor()">Change Color</button><br><br>

{{#visible}}
<div class="box" style-background-color="{{colors[colorIdx]}}" fade-in="3000">Color: {{colors[colorIdx]}}</div>
<div class="box" style="background-color:{{colors[colorIdx]}}" fade-in="3000">Color: {{colors[colorIdx]}}</div>
{{/visible}}
</script>

CSS

body {font-family:helvetica; font-size:12px}
div.box { width:100px; height: 100px; color:#fff; margin-top:10px; text-shadow:1px 1px #000;}

JavaScript

Ractive.WELCOME_MESSAGE = false;
console.log(Ractive.VERSION);

// from https://ractive.js.org/ractive-transitions-fade/
Ractive.transitions.fade = function fade(t, params) {
		var targetOpacity;
    var DEFAULTS = {
        delay: 0,
        duration: 300,
        easing: 'linear'
    };
    params = t.processParams(params, DEFAULTS);
		if (t.isIntro) {
			targetOpacity = t.getStyle('opacity');
			t.setStyle('opacity', 0);
		} else {
			targetOpacity = 0;
		}
		t.animateStyle('opacity', targetOpacity, params).then(t.complete);
};

var app = new Ractive({
  el: '#demo',
  template: '#tmpl',
  toggleVisible: toggleVisible,
  changeColor: changeColor,
  noIntro:true,
  data: {
  	visible: false,
    colorIdx: 0,
    colors:['#000', '#F00', '#0F0', '#00F', '#FF0', '#0FF', '#FFF']
  }
});

function toggleVisible() {
	app.toggle('visible');
}

function changeColor() {
	var colorIdx = app.get('colorIdx');
	var colors = app.get('colors');
	app.set('colorIdx', (colorIdx + 1) % colors.length);
}