[IMP] : page transition like medium

bzr revid: aja@tinyerp.com-20140225105921-iz23qy6scmgz2tgo

addons/website_blog/static/src/css/website_blog.css

@@ -56,6 +56,18 @@ p.post-meta {
   font-weight: bold;
 }
 
+.easing_upward {
+  -webkit-transform: translate3d(0, -20%, 0);
+  -moz-transform: translate3d(0, -20%, 0);
+  -ms-transform: translate3d(0, -20%, 0);
+  -o-transform: translate3d(0, -20%, 0);
+  transform: translate3d(0, -20%, 0);
+  -webkit-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  -moz-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  -o-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
 /*Inline Discussion */
 .discussion {
   padding: 5px 10px 10px;

addons/website_blog/static/src/css/website_blog.sass

@@ -47,6 +47,17 @@ p.post-meta
     h1
         font-weight: bold
 
+.easing_upward
+    -webkit-transform: translate3d(0, -20%, 0)
+    -moz-transform: translate3d(0, -20%, 0)
+    -ms-transform: translate3d(0, -20%, 0)
+    -o-transform: translate3d(0, -20%, 0)
+    transform: translate3d(0, -20%, 0)
+    -webkit-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
+    -moz-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
+    -o-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
+    transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
+
 /*Inline Discussion
 
 .discussion

addons/website_blog/static/src/js/website_blog.js

@@ -23,7 +23,6 @@ $(document).ready(function() {
 
     function page_transist(event) {
         event.preventDefault();
-        var translationValue  = $('.cover_footer').get(0).getBoundingClientRect().top;
         newLocation = $('.js_next')[0].href;
         $('.cover_footer')
         .fadeIn(900, newpage);
@@ -40,8 +39,8 @@ $(document).ready(function() {
         });
     }
 
-    function arrow_scroll(event){
-        var node = $('#fa-angle-down')
+    function arrow_scroll(){
+        var node = $('#blog_angle_down')
         var stickyTop = node.offset().top - 50;
         $(window).scroll(function(event){
             var scrolltop = $(window).scrollTop()
@@ -50,24 +49,33 @@ $(document).ready(function() {
         });
     }
 
+    function page_upwards() {
+        var translationValue = $("#wrap:last-child").get(0).getBoundingClientRect().top;
+        $("#wrap:last-child")
+            .addClass('easing_upward')
+        setTimeout(function(){
+            $html = $(document.documentElement);
+            $("#wrap:first-child").add($html).scrollTop(0);
+            $("#wrap:last-child").removeClass('easing_upward');
+            $("#wrap:first").remove();
+        }, 500 );
+    }
+
     function newpage() {
         $.ajax({
             url: newLocation,
         }).done(function(data) {
             $('main').append($(data).find('main').html());
-            $("html").stop().animate({ scrollTop: $("#wrap:last-child").offset().top }, 1000,function(e){
-                $("#wrap:first").remove();
-                $(document).scrollTop($("#wrap:last-child").offset().top);
-                //bind again it takes control from now on, until page relaod.
-                $(document).find('.cover_footer').on('click',page_transist);
-                $(document).find('a[href^="#blog_content"]').on('click', animate);
-                var content = $(document).find("#blog_content p");
-                if (content && discussion){
-                   new openerp.website.blog_discussion({'content' : content});
-                }
-                if (share) $("p").share();
-                arrow_scroll();
-            });
+            page_upwards()
+            //bind again it takes control from now on, until page relaod.
+            $(document).find('.cover_footer').on('click',page_transist);
+            $(document).find('a[href^="#blog_content"]').on('click', animate);
+            var content = $(document).find("#blog_content p");
+            if (content && discussion){
+               new openerp.website.blog_discussion({'content' : content});
+            }
+            if (share) $("p").share();
+            arrow_scroll();
             if (newLocation != window.location) {
                 history.pushState(null, null, newLocation);
             }

addons/website_blog/views/website_blog_templates.xml

@@ -193,7 +193,7 @@
                 <img class="img-circle" t-att-src="'/website/image?model=res.users&amp;field=image_small&amp;id='+str(blog_post.create_uid.id)" style="width: 30px; margin-right: 10px;"/>
                 <small id="blog_author" t-field="blog_post.create_uid.name"/><br/>
             </div>
-            <div t-if="blog_post.content_image" id="fa-angle-down">
+            <div t-if="blog_post.content_image" id="blog_angle_down">
                 <a href="#blog_content" class="fa fa-angle-down fa-2x fa-inverse mt64"/>
             </div>
         </div>