Ember Animate Trial

by amindunited

HTML

<script type="text/x-handlebars" data-template-name="application">
    <h1>Application</h1>
    <div>{{#link-to "about"}}About{{/link-to}}</div>
    <div>{{#link-to "favorites"}}Favs{{/link-to}}</div>
  <div>
    {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="about">
    <h2>About</h2>
    
    <div>{{#link-to "index"}}Home{{/link-to}}</div>
    <div>{{#link-to "favorites"}}Favs{{/link-to}}</div>
  <div>
    {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="favorites">
    <h2>Favs</h2>
    
    <div>{{#link-to "index"}}Home{{/link-to}}</div>
    <div>{{#link-to "favorites"}}Favs{{/link-to}}</div>
  <div>
    {{outlet}}
  </div>
</script>


<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.min.js"></script>
<script src="https://rawgithub.com/gigafied/ember-animate/master/ember-animate.js"></script>

CSS

.page {
    background-color: #666666;
    color: #ededed;
}
.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
 
.page.left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}
 
.page.center {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
 
.page.right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
 
.page.transition {
    -webkit-transition-duration: .99s;
    transition-duration: .99s;
}

JavaScript

//http://www.jquerybyexample.net/2013/08/take-webpage-screenshot-html5-jquery-javascript.html
//http://www.xpertdeveloper.com/2012/10/webpage-screenshot-with-html5-js/
App = Em.Application.create();

App.Router.map(function() {
  this.route("about", { path: "/about" });
  this.route("favorites", { path: "/favs" });
});

App.AboutView = Ember.View.extend({
    classNames: ['page'],
    classNameBindings: ['position'],
    position:'left',
    willAnimateIn : function () {
        this.$().css("opacity", 0);
        this.set('position', 'right');
    },

    animateIn : function (done) {
        this.$().fadeTo(500, 1, done);
        this.set('position', 'transition');
    },
    didAnimateIn: function(){
        this.set('position', 'center');
    },
    animateOut : function (done) {
        this.$().fadeTo(500, 0, done);
        this.set('position', 'left');
    }
})

App.FavoritesView = Ember.View.extend({
    classNames: ['page'],
    classNameBindings: ['position'],
    position:'left',
    willAnimateIn : function () {
        this.$().css("opacity", 0);
        this.set('position', 'right');
    },

    animateIn : function (done) {
        this.$().fadeTo(500, 1, done);
        this.set('position', 'transition');
    },
    didAnimateIn: function(){
        this.set('position', 'center');
    },
    animateOut : function (done) {
        this.$().fadeTo(500, 0, done);
        this.set('position', 'left');
    }
})