JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<section>
    <h1>fadeVisible ではなく CSS で</h1>
    <p class="message" data-bind="class: { shown: displayMessage }">
        尚、このメッセージは displayMessage プロパティが false になると自動的に消滅する。
    </p>
    <button data-bind="click: toggle">切り替え</button>
</section>

<section>
    <h1>ViewModel ではなくグローバル関数で</h1>
    <ul data-bind="foreach: { data: items, afterAdd: showItem, beforeRemove: hideItem }">
        <li>
            <span data-bind="text: $data"></span>
            <a href="#" data-bind="click: $root.deleteItem">削除</a>
        </li>
    </ul>
    <button data-bind="click: addItem">追加</button>
</section>

CSS

body { background-color: lightgray; }
section { padding: 20px; margin: 10px; background-color: white; }


.message {
    opacity: 0;
    transition: opacity .3s;
}
.message.shown {
    opacity: 1;
}

JavaScript

///////////// Class Binding Handler ///////////////
ko.bindingHandlers['class'] = {
    update: function(element, valueAccessor) {
        ko.bindingHandlers.css.update(element, valueAccessor);
        if (jQuery) { // jQuery がロードされてたら、classChanged イベントを発火
            jQuery(element).trigger('classChanged', [ valueAccessor() ]);
        }
    }
}

/////////////////// ViewModel /////////////////////

function ViewModel() {
    var self = this;
    self.displayMessage = ko.observable(true);
    self.items = ko.observableArray([]);
    
    self.toggle = function() {
        self.displayMessage(!self.displayMessage());
    };
    
}

ko.applyBindings(new ViewModel());