added animation @mixin; refactored post-viewer binding calls

public/javascripts/app/pages/post-viewer.js

@@ -26,28 +26,43 @@ app.pages.PostViewer = app.views.Base.extend({
   },
 
   postRenderTemplate : function() {
-    this.setKeyMappings();
+    this.bindNavHooks();
   },
 
-  setKeyMappings : function() {
+  bindQuickCommenting : function() {
-    var nextPostLocation = this.model.get("next_post");
-    var previousPostLocation = this.model.get("previous_post");
-
     /* focus modal */
     // doc.keypress(function(){
       // $('#text').focus();
       // $('#comment').modal();
     // });
+  },
 
+  bindNavHooks : function() {
     /* navagation hooks */
-    $(document).keydown(function(e){
+    var nextPostLocation = this.model.get("next_post");
-      if (e.keyCode == 37 && nextPostLocation) {
+    var previousPostLocation = this.model.get("previous_post");
-        window.location = nextPostLocation
 
-      }else if(e.keyCode == 39 && previousPostLocation) {
+    $(document).keydown(function(e){
-        window.location = previousPostLocation
+      switch(e.keyCode) {
+        case 37:
+          navigate(nextPostLocation, "left"); break;
+        case 39:
+          navigate(previousPostLocation, "right"); break;
+        default:
+          break;
       }
     })
+
+    function navigate(loc, direction) {
+      loc ? window.location = loc : bump(direction)
+    }
+
+    function bump(direction) {
+      $(".backdrop").addClass("bump-" + direction)
+      setTimeout( function(){
+        $(".backdrop").removeClass("bump-" + direction)
+      }, 200)
+    }
   }
 
 })

public/stylesheets/sass/new-templates.scss

@@ -45,8 +45,55 @@ $light-grey: #999;
   transition: $type $speed;
 }
 
+@mixin animation($name, $speed:0.2s, $easing:ease-in-out) {
+  -webkit-animation: $name $speed $easing;
+  -moz-animation: $name $speed $easing;
+  -ms-animation: $name $speed $easing;
+}
+
+/* keyframes */
+
+@-webkit-keyframes bump-left {
+  0%   { left: 0; }
+  40%  { left: 20px; }
+  100% { left: 0; }
+}
+
+@-moz-keyframes bump-left {
+  0%   { left: 0; }
+  40%  { left: 20px; }
+  100% { left: 0; }
+}
+
+@-ms-keyframes bump-left {
+  0%   { left: 0; }
+  40%  { left: 20px; }
+  100% { left: 0; }
+}
+
+@-webkit-keyframes bump-right {
+  0%   { left: 0; }
+  40%  { left: -20px; }
+  100% { left: 0; }
+}
+
+@-moz-keyframes bump-right {
+  0%   { left: 0; }
+  40%  { left: -20px; }
+  100% { left: 0; }
+}
+
+@-ms-keyframes bump-right {
+  0%   { left: 0; }
+  40%  { left: 20px; }
+  100% { left: 0; }
+}
+
 /* styles */
 
+.bump-left { @include animation(bump-left) }
+.bump-right { @include animation(bump-right) }
+
 .multi-photo {
   .img-bounding-box {
     @include center(horizontal);