JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<div data-bind="flash: age" class="person">
<span data-bind="text: name"></span>
(age <span data-bind="text: age"></span>)
</div>
<button data-bind="click: incrAge">Increase Age</button>
CSS
.person {
width: 200px;
height: 50px;
background-color: cyan;
}
.ko-flash {
background-color: yellow;
}
.transition-duration-instant {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
.transition-duration-medium {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
JavaScript
var viewModel = {
name: ko.observable("Alice"),
age: ko.observable(1),
incrAge: function () {
viewModel.age(viewModel.age() + 1);
}
};
ko.bindingHandlers.flash = {
init: function () {},
update: function (element, valueAccessor) {
console.log("On Update");
$(element).attr("dummy-attribute", ko.unwrap(valueAccessor()));
$(element).removeClass("transition-duration-medium");
$(element).addClass("transition-duration-instant");
$(element).addClass("ko-flash");
setTimeout(function () {
$(element).removeClass("transition-duration-instant");
$(element).addClass("transition-duration-medium");
$(element).removeClass("ko-flash");
}, 500);
}
};
ko.applyBindings(viewModel);