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.toggle('animate')">Transitions {{animate ? "on" : "off"}}</button>

<button on-click="@this.toggle('itemVisible')">Toggle Item ({{itemVisible ? "visible" : "invisible"}})</button>

{{#itemVisible}}
<div class="item" fade-in-out="1000">Fade always</div>
{{/itemVisible}}
{{#itemVisible}}
<div class="item" {{#if animate}}fade-in-out="1000"{{/if}}>Fade conditionally</div>{{/itemVisible}}
</script>

CSS

.item { width: 100px; height: 100px; background: #c00; color: #fff; padding: 10px; text-align:center; margin:5px }
body {font-family:helvetica}

JavaScript

Ractive.transitions.fade = function (t, params) {
  var targetOpacity = 0;
  var defaults = {
    delay: 0,
    duration: 300,
    easing: 'linear'
  };

  params = t.processParams(params, defaults);

  if (t.isIntro) {
    targetOpacity = t.getStyle('opacity');
    t.setStyle('opacity', 0);
  }

  t.animateStyle('opacity', targetOpacity, params).then(t.complete);
};

new Ractive({
    el: '#demo',
    template: '#tmpl',
    data: {
        animate: true,
        itemVisible: true
    },
    noIntro:true
});