From b45a695b93c2c356e1e68153268d2d1dd3fb7165 Mon Sep 17 00:00:00 2001 From: Chip Black Date: Mon, 17 Mar 2014 03:40:13 -0500 Subject: [PATCH] Snazzy animations for new post widget --- www/css/blerg.css | 44 +++++++++++++++++++++++++++++++++++++++-- www/jssrc/blerg/Post.js | 7 ++++++- 2 files changed, 48 insertions(+), 3 deletions(-) diff --git a/www/css/blerg.css b/www/css/blerg.css index f9c36ed..1853c78 100644 --- a/www/css/blerg.css +++ b/www/css/blerg.css @@ -182,8 +182,8 @@ h1, h2, h3 { position: fixed; top: 0; left: 0; - bottom: 0; - right: 0; + width: 100%; + height: 100%; background-color: #1E1E1E; } @@ -241,6 +241,46 @@ h1, h2, h3 { padding: 0 12pt; } +.blerg-post.enter { + animation: blerg-post-enter 750ms; +} + +@keyframes blerg-post-enter { + from { + transform: translateY(-100%); + animation-timing-function: ease-in; + } + + 60% { + transform: translateY(0); + animation-timing-function: ease-out; + } + + 80% { + transform: translateY(-2%); + animation-timing-function: ease-in; + } + + to { + transform: translateY(0); + } +} + +.blerg-post.exit { + animation: blerg-post-exit 500ms forwards; +} + +@keyframes blerg-post-exit { + from { + transform: translateY(0); + animation-timing-function: ease-in; + } + + to { + transform: translateY(100%); + } +} + .login { display: inline-block; width: 200px; diff --git a/www/jssrc/blerg/Post.js b/www/jssrc/blerg/Post.js index 064db00..f39520e 100644 --- a/www/jssrc/blerg/Post.js +++ b/www/jssrc/blerg/Post.js @@ -93,8 +93,13 @@ enyo.kind({ this.$.toolbar.reflow(); this.reflow(); } else { - this.hide(); + setTimeout(function() { + this.hide(); + this.removeClass('exit'); + }.bind(this), 500); } + this.addRemoveClass('enter', inEvent.showing); + this.addRemoveClass('exit', !inEvent.showing); }, updatePreview: function(inSender, inEvent) { this.$.preview.setContent(blerg.Util.blergFormat(this.getData())); -- 2.25.1