larsbs · April 2, 2014 20:00
diff --git a/app.js b/app.js
 App = Ember.Application.create(null);

 App.Router.map(function() {
    this.resource('content1');
    this.resource('content2');
 });

 App.Content1View = Ember.View.extend({
    willAnimateIn: function() {
        console.log('willAnimateIn')
        this.$().fadeOut(0);
    },

    animateIn: function() {
        console.log('animateIn');
        this.$().fadeIn();
    },

    animateOut: function() {
        console.log('animateOut');
        this.$().fadeOut();
    }
 });

 App.Content2View = Ember.View.extend({
    willAnimateIn: function() {
        console.log('willAnimateIn')
        this.$().fadeOut(0);
    },

    animateIn: function() {
        console.log('animateIn');
        this.$().fadeIn();
    },

    animateOut: function() {
        console.log('animateOut');
        this.$().fadeOut();
    }
 });
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 	<head>
 		<title>Ember Animations Test</title>
 	</head>
 	<body>

        <script type="text/x-handlebars">
            <ul>
                <li>
                    {{#link-to 'content1'}}Content 1{{/link-to}}
                <li>
                    {{#link-to 'content2'}}Content 2{{/link-to}}
                </li>
            </ul>
            <h1>Ember Animation Example</h1>
            {{outlet}}
        </script>

        <script type="text/x-handlebars" id="content1">
            <p>
                Suspendisse et dolor mi. Nunc rutrum leo non molestie mattis.
                Aliquam varius varius magna, nec faucibus magna molestie eget.
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                Sed tortor tortor, volutpat a tellus ac, iaculis malesuada nulla. In a semper nibh. Ut erat dolor,
                pretium vitae nisl in, fringilla rutrum quam. Donec vulputate et libero quis accumsan.
                Mauris non auctor nisi. Aenean feugiat laoreet egestas. Curabitur a euismod orci.
                Proin commodo urna vel eros mattis pretium sit amet et est. Quisque eu congue elit,
                vitae dictum purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
                per inceptos himenaeos. Etiam bibendum vestibulum consectetur. Curabitur at pellentesque diam.
            </p>
        </script>

        <script type="text/x-handlebars" id="content2">
            <p>
                Vivamus pharetra lorem elit, pharetra venenatis lectus tempor in. Curabitur nunc libero, laoreet et
                feugiat ac, porttitor non mi. Aenean id libero lorem. Vivamus enim eros, suscipit sit amet rutrum et,
                interdum eu dui. Aenean auctor justo nec nisi gravida facilisis. Quisque sollicitudin luctus eros sed
                scelerisque. Nulla porttitor laoreet ante, sed condimentum nibh tempus sit amet. Curabitur auctor est
                sit amet massa suscipit consequat. Cras id leo ante. Suspendisse potenti. Praesent vitae malesuada
                eros, non commodo mi. Pellentesque massa mi, volutpat a leo at, luctus suscipit enim.
            </p>
        </script>
 		
 		<script src="js/libs/jquery-1.10.2.js"></script>
 		<script src="js/libs/handlebars-1.1.2.js"></script>
 		<script src="js/libs/ember-1.5.0.js"></script>
        <script src="js/libs/ember-animate.js"></script>
 		<script src="js/app.js"></script>
 	</body>
 </html>
	App = Ember.Application.create(null);

	App.Router.map(function() {
	this.resource('content1');
	this.resource('content2');
	});

	App.Content1View = Ember.View.extend({
	willAnimateIn: function() {
	console.log('willAnimateIn')
	this.$().fadeOut(0);
	},

	animateIn: function() {
	console.log('animateIn');
	this.$().fadeIn();
	},

	animateOut: function() {
	console.log('animateOut');
	this.$().fadeOut();
	}
	});

	App.Content2View = Ember.View.extend({
	willAnimateIn: function() {
	console.log('willAnimateIn')
	this.$().fadeOut(0);
	},

	animateIn: function() {
	console.log('animateIn');
	this.$().fadeIn();
	},

	animateOut: function() {
	console.log('animateOut');
	this.$().fadeOut();
	}
	});
	<!doctype html>
	<html>
	<head>
	<title>Ember Animations Test</title>
	</head>
	<body>

	<script type="text/x-handlebars">
	<ul>
	<li>
	{{#link-to 'content1'}}Content 1{{/link-to}}
	<li>
	{{#link-to 'content2'}}Content 2{{/link-to}}
	</li>
	</ul>
	<h1>Ember Animation Example</h1>
	{{outlet}}
	</script>

	<script type="text/x-handlebars" id="content1">
	<p>
	Suspendisse et dolor mi. Nunc rutrum leo non molestie mattis.
	Aliquam varius varius magna, nec faucibus magna molestie eget.
	Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
	Sed tortor tortor, volutpat a tellus ac, iaculis malesuada nulla. In a semper nibh. Ut erat dolor,
	pretium vitae nisl in, fringilla rutrum quam. Donec vulputate et libero quis accumsan.
	Mauris non auctor nisi. Aenean feugiat laoreet egestas. Curabitur a euismod orci.
	Proin commodo urna vel eros mattis pretium sit amet et est. Quisque eu congue elit,
	vitae dictum purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
	per inceptos himenaeos. Etiam bibendum vestibulum consectetur. Curabitur at pellentesque diam.
	</p>
	</script>

	<script type="text/x-handlebars" id="content2">
	<p>
	Vivamus pharetra lorem elit, pharetra venenatis lectus tempor in. Curabitur nunc libero, laoreet et
	feugiat ac, porttitor non mi. Aenean id libero lorem. Vivamus enim eros, suscipit sit amet rutrum et,
	interdum eu dui. Aenean auctor justo nec nisi gravida facilisis. Quisque sollicitudin luctus eros sed
	scelerisque. Nulla porttitor laoreet ante, sed condimentum nibh tempus sit amet. Curabitur auctor est
	sit amet massa suscipit consequat. Cras id leo ante. Suspendisse potenti. Praesent vitae malesuada
	eros, non commodo mi. Pellentesque massa mi, volutpat a leo at, luctus suscipit enim.
	</p>
	</script>

	<script src="js/libs/jquery-1.10.2.js"></script>
	<script src="js/libs/handlebars-1.1.2.js"></script>
	<script src="js/libs/ember-1.5.0.js"></script>
	<script src="js/libs/ember-animate.js"></script>
	<script src="js/app.js"></script>
	</body>
	</html>