Knockoutjs.com - Animated Transitions

http://knockoutjs.com/examples/animatedTransitions.html

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div class='liveExample'> 
    <h2>Planets</h2>
     
    <p>
        Show:
        <label><input type='radio' name="type" value='all' data-bind='checked: typeToShow' />All</label>
        <label><input type='radio' name="type" value='rock' data-bind='checked: typeToShow' />Rocky planets</label>
        <label><input type='radio' name="type" value='gasgiant' data-bind='checked: typeToShow' />Gas giants</label>
    </p>
     
    <ul class="planets-list" data-bind='template: { foreach: planetsToShow,
                                beforeRemove: hidePlanetElement,
                                afterAdd: showPlanetElement }'>
        <li data-bind='attr: { "class": "planet " + type }, text: name'> </li>
    </ul>
     
    <p>
        <button data-bind='click: addPlanet.bind($data, "rock")'>Add rocky planet</button>
        <button data-bind='click: addPlanet.bind($data, "gasgiant")'>Add gas giant</button>
    </p>
    
</div>

CSS

.planets-list li
{
    list-style-type : none;
    margin-left : 0;
    
    -webkit-transition:background-color 1s ease-in; 
    -moz-transition:background-color 1s ease-in; 
    -o-transition:background-color 1s ease-in; 
    transition:background-color 1s ease-in;
}

.planet.newly-added-item 
{
    background-color : #ff0 !important;    
}

.planet.rock
{
    background-color: #27ae60;
}

.planet.gasgiant
{
    background-color: #2980b9;
}
    
    

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

.planet { color : #fff; padding: 0.25em; border: 1px solid silver; margin-bottom: 0.5em; font-size: 0.75em; }

.liveExample input { margin: 0 0.3em 0 1em; }

li { list-style-type: disc; margin-left: 20px; }

JavaScript

var PlanetsModel = function() {
    this.planets = ko.observableArray([
        { name: "Mercury", type: "rock"},
        { name: "Venus", type: "rock"},
        { name: "Earth", type: "rock"},
        { name: "Mars", type: "rock"},
        { name: "Jupiter", type: "gasgiant"},
        { name: "Saturn", type: "gasgiant"},
        { name: "Uranus", type: "gasgiant"},
        { name: "Neptune", type: "gasgiant"},
        { name: "Pluto", type: "rock"}
    ]);
 
    this.typeToShow = ko.observable("all");
 
    this.addPlanet = function(type) {
        this.planets.push({
            name: "New planet",
            type: type
        });
    };
 
    this.planetsToShow = ko.computed(function() {
        // Represents a filtered list of planets
        // i.e., only those matching the "typeToShow" condition
        var desiredType = this.typeToShow();
        if (desiredType == "all") return this.planets();
        return ko.utils.arrayFilter(this.planets(), function(planet) {
            return planet.type == desiredType;
        });
    }, this);
 
    // Animation callbacks for the planets list
    this.showPlanetElement = function(elem) { 
        if (elem.nodeType === 1) {
            $(elem).addClass("newly-added-item");
            $(elem).hide().slideDown(); 
            $(elem).removeClass("newly-added-item");            
        }
    }
    this.hidePlanetElement = function(elem) { if (elem.nodeType === 1) $(elem).slideUp(function() { $(elem).remove(); }) }
};
 
ko.applyBindings(new PlanetsModel());