Knockoutjs.com - Animated Transitions

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

HTML

<div class='liveExample'> 
    
    <h2>Planets</h2> 
    <p> 
        <label> 
            <input data-bind='checked: displayAdvancedOptions' type='checkbox' /> 
            Display advanced options
        </label>    
    </p> 
    
    <p data-bind='fadeVisible: displayAdvancedOptions'> 
            Show: 
        <br/>
            <label><input data-bind='checked: typeToShow' type='radio' value='all' />All</label>
            <label><input data-bind='checked: typeToShow' type='radio' value='rock' />Rocky planets</label> 
            <label><input data-bind='checked: typeToShow' type='radio' value='gasgiant' />Gas giants</label> 
        <br/>
            <label><input data-bind='checked: locationToShow' type='radio' value='all' />All</label> 
            <label><input data-bind='checked: locationToShow' type='radio' value='inner' />Inner</label> 
            <label><input data-bind='checked: locationToShow' type='radio' value='outer' />Outer</label> 
    </p> 
    
    <div data-bind='template: { name: "planetsTemplate", 
    foreach: planetsToShow, 
    beforeRemove: function(elem) { $(elem).slideUp() },
    afterAdd: function(elem) { $(elem).hide().slideDown() } }'> </div> 
    
    <script id='planetsTemplate' type='text/html'> 
        <div class='planet ${ type }'>${ name }</div>
    </script> 
    
    <p data-bind='fadeVisible: displayAdvancedOptions'> 
        <button data-bind='click: function() { addPlanet("rock") }'>Add rocky planet</button> 
        <button data-bind='click: function() { addPlanet("gasgiant") }'>Add gas giant</button>         
        
    </p> 
    
</div>

CSS

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 { background-color: #AAEECC; padding: 0.25em; border: 1px solid silver; margin-bottom: 0.5em; font-size: 0.75em; }
.planet.rock { background-color: #EECCAA; }
.liveExample input { margin: 0 0.3em 0 1em; }

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

JavaScript

var viewModel = {
    planets: ko.observableArray([
        {
        name: "Mercury",
        type: "rock",
        location: "inner"},
    {
        name: "Venus",
        type: "rock",
        location: "inner"},
    {
        name: "Earth",
        type: "rock",
        location: "inner"},
    {
        name: "Mars",
        type: "rock",
        location: "inner"},
    {
        name: "Jupiter",
        type: "gasgiant",
        location: "outer"},
    {
        name: "Saturn",
        type: "gasgiant",
        location: "outer"},
    {
        name: "Uranus",
        type: "gasgiant",
        location: "outer"},
    {
        name: "Neptune",
        type: "gasgiant",
        location: "outer"},
    {
        name: "Pluto",
        type: "rock",
        location: "outer"}
    ]),
    typeToShow: ko.observable("all"),
    locationToShow: ko.observable("all"),
    displayAdvancedOptions: ko.observable(false),

    addPlanet: function(type) {
        this.planets.push({
            name: " New planet ",
            type: type
        });
    }
};

viewModel.planetsToShow = ko.dependentObservable(function() {
    // Represents a filtered list of planets
    // i.e., only those matching the " typeToShow " condition
    var desiredType = this.typeToShow(),
        desiredLocation = this.locationToShow();
    return ko.utils.arrayFilter(this.planets(), function(planet) {
        return ((desiredLocation == "all" || planet.location == desiredLocation)
            && (desiredType == "all" || planet.type == desiredType));
        
    });
}.bind(viewModel));

// Here's a custom Knockout binding that makes elements shown/hidden via jQuery's fadeIn()/fadeOut() methods
// Could be stored in a separate utility library
ko.bindingHandlers.fadeVisible = {
    init: function(element, valueAccessor) {
        // Initially set the element to be instantly visible/hidden depending on the value
        var value = valueAccessor();
       ...